W3.JS HTML Sort
จัดเรียงองค์ประกอบ:
w3.sortHTML(selector)
เรียงรายการ
คลิกปุ่มเพื่อจัดเรียงรายการตามตัวอักษร:
- ออสโล
- สตอกโฮล์ม
- เฮลซิงกิ
- เบอร์ลิน
- โรม
- มาดริด
ตัวอย่าง
<button onclick="w3.sortHTML('#id01', 'li')">Sort</button>
<ul id="id01">
<li>Oslo</li>
<li>Stockholm</li>
<li>Helsinki</li>
<li>Berlin</li>
<li>Rome</li>
<li>Madrid</li>
</ul>
จัดเรียงตาราง
คลิกส่วนหัวของตารางเพื่อจัดเรียงตารางตามลำดับ:
| ชื่อ | ประเทศ |
|---|---|
| ถ้วยด่วนของแบร์กลุนด์ | สวีเดน |
| เหนือใต้ | สหราชอาณาจักร |
| กล่องใส่อาหารของอัลเฟรด | เยอรมนี |
| อาหารราชวงศ์ | เยอรมนี |
| รวมโกดังอาหาร | อิตาลี |
| อาหารพิเศษของปารีส | ฝรั่งเศส |
| ซื้อขายเกาะ | สหราชอาณาจักร |
| ห้องเก็บไวน์ Laughing Bacchus | แคนาดา |
ตัวอย่าง
<table id="myTable">
<tr>
<th onclick="w3.sortHTML('#myTable','.item',
'td:nth-child(1)')">Name</th>
<th onclick="w3.sortHTML('#myTable','.item', 'td:nth-child(2)')">Country</th>
</tr>
<tr class="item">
<td>Berglunds snabbkop</td>
<td>Sweden</td>
</tr>
<tr class="item">
<td>North/South</td>
<td>UK</td>
</tr>
<tr class="item">
<td>Alfreds
Futterkiste</td>
<td>Germany</td>
</tr>
...
</table>