W3.JS HTML 排序
排序元素
w3.sortHTML(選擇器)
排序列表
點選按鈕按字母順序排序列表
- 奧斯陸
- 斯德哥爾摩
- Helsinki
- Berlin
- 羅馬
- Madrid
示例
<button onclick="w3.sortHTML('#id01', 'li')">排序</button>
<ul id="id01">
<li>奧斯陸</li>
<li>斯德哥爾摩</li>
<li>赫爾辛基</li>
<li>柏林</li>
<li>羅馬</li>
<li>馬德里</li>
</ul>
親自嘗試 » 使用 CSS »排序表格
點選表格標題進行相應排序
| 名稱 | 國家 |
|---|---|
| Berglunds snabbkop | Sweden |
| North/South | UK |
| Alfreds Futterkiste | Germany |
| Koniglich Essen | Germany |
| Magazzini Alimentari Riuniti | Italy |
| Paris specialites | France |
| Island Trading | UK |
| Laughing Bacchus Winecellars | 加拿大 |
示例
<table id="myTable">
<tr>
<th onclick="w3.sortHTML('#myTable','.item', 'td:nth-child(1)')">名稱</th>
<th onclick="w3.sortHTML('#myTable','.item', 'td:nth-child(2)')">國家</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>
親自嘗試 » 使用 CSS »
