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，相關的tds應按字母順序排序（以及其餘行）。

Answer 1

這是一個通用的方法。沒有一個步驟是特別困難，它只是有時很難把一切融合在一起：

1. 綁定一個事件處理每個<th>元素
2. 此事件處理程序將需要看所有的<tr>元素，並且把這些放入數組中。
3. 用Array.sort()排序<tr>元素。排序功能將需要查看<td><tr>的子元素的內容，該元素的點擊次數與<th>元素的索引相同。
4. 清除<tbody>並按排序順序重新插入<tr>。
5. 向<th>添加某種指示符來指示它已排序。

現在我不會在生產中使用這種技術的結果，因爲它非常脆弱，我們不應該直接以這種方式操縱DOM，但至少這是開發JS技能的一個很好的練習。