W3.JSHTMLソート
要素の並べ替え：
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>
テーブルを並べ替える
テーブルヘッダーをクリックして、それに応じてテーブルを並べ替えます。
| 名前 | 国 |
|---|---|
| ベルグルンドのクイックカップ | スウェーデン |
| 南北 | 英国 |
| アルフレッドの給餌箱 | ドイツ |
| ロイヤルフード | ドイツ |
| 集められた食品倉庫 | イタリア |
| パリの特産品 | フランス |
| アイランドトレーディング | 英国 |
| 笑うバッカスワインセラー | カナダ |
例
<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>