jQueryでテーブルをソートする方法

Question

テーブルソート用のプラグインがたくさんあることは知っていますが、私はそれを自分で学習したいと思います。ここに私のテーブルがあります。

<table class="table-bordered sortable"> 
    <tr> 
     <th>Name</th> 
     <th>Wage</th> 
     <th>Age</th> 
     <th>City</th> 
    </tr> 
    <tr> 
     <td>Jack Carver</td> 
     <td>368</td> 
     <td>45</td> 
     <td>New York</td> 
    </tr> 
    <tr> 
     <td>John Johnson</td> 
     <td>450</td> 
     <td>19</td> 
     <td>Atlanta</td> 
    </tr> 
    <tr> 
     <td>Steve McKenzie</td> 
     <td>891</td> 
     <td>88</td> 
     <td>Miami</td> 
    </tr> 
    </table> 

テーブルをソート可能にするにはどうすればよいですか？ユーザーがthをクリックすると、関連するtdはアルファベット順（および行の残りの部分も）ソートされます。

Answer 1

ここに一般的なアプローチがあります。バインド

1. このイベントハンドラは<tr>のすべての要素を調べる必要があります<th>要素
2. のそれぞれにイベントハンドラ、および：誰のステップは、それは一緒にすべてを置くことが時々だけ難しい、特に困難ではありませんそれらを配列に入れてください。
3. Array.sort()で<tr>の要素をソートします。ソート機能では、クリックされた<th>要素と同じインデックスで<tr>の子要素<td>の内容を確認する必要があります。
4. <tbody>をクリアし、<tr>をソート順に再挿入します。
5. <th>に何らかの種類のインジケータを追加して、ソートされていることを示します。

これは非常に壊れやすく、このような方法で直接DOMを操作するべきではありませんが、少なくともJSスキルを開発するのは良い練習です。