如何使用基於列索引的javascript對html表進行排序

Question

我正在使用帶有結構的桌子

<table cellspacing="0" cellpadding="3" rules="cols" border="1" id="ctl00_Content_GrdCustomer" style="color:Black;border-color:#999999;width:640px;border-collapse:collapse;">
    <tr style="color:White;background-color:Black;font-weight:bold;">
        <th scope="col">Something</th>
        <th scope="col">Client Name</th>
        <th scope="col">Address</th>
        <th scope="col">Place</th>
        <th scope="col">City</th>
        <th scope="col">Country</th>
    </tr>
    <tr class="home-history-grid-row customerData">
        <td align="center" style="width:50px;"><!--Checkbox Goes Here--></td>
        <td align="center">Raju Varghese</td>
        <td align="center">&nbsp;</td>
        <td align="center">&nbsp;</td>
        <td align="center">&nbsp;</td>
        <td align="center">Country4</td>
    </tr>
    <tr class="home-history-grid-row customerData">
        <td align="center" style="width:50px;"><!--Checkbox Goes Here--></td>
        <td align="center">Joseph K. J</td>
        <td align="center">&nbsp;</td>
        <td align="center">&nbsp;</td>
        <td align="center">&nbsp;</td>
        <td align="center">Country4</td>
    </tr>
</table>

我需要根據標題為'Client Name'的'th'對表格進行排序。 通過這么多鏈接消失了所有鏈接基於標題點擊排序，我不知道javascript多少。 請幫助

Answer 1

如果你不太了解javascript，那么我推薦tablesorter：

tablesorter.com

確保包含jQuery，然后包含tablesorter JS和CSS文件。 你還需要將頭部包裹在標簽中，將身體包裹在標簽中。 網站上的文檔包含您需要的所有信息

Answer 2

我不確定你的具體情況是什么，因為你的帖子缺乏細節，但我認為你可能會發現一種更容易管理的不同方法。

如果能夠，您應該在JavaScript中創建一個具有[6][n]成員的二維數組，其中n是您計划在表中存儲的條目數。 創建數組后，將所有數據硬編碼到數組中。 在數組中有數據后，您要做的是對相應的行進行排序，然后使用for循環填充html表。

這種方法會減少頭痛，因為您不必擔心從HTML頁面加載數據，然后用新生成的表替換整個表，就像您當前的方法一樣。

如果您有任何疑問或需要進一步澄清以下評論。

干杯和快樂的編碼！

Answer 3

聽起來你只想根據特定列對表進行排序，而無需用戶點擊啟動它。

您可以使用DataTables執行此操作。 初始化數據表時，可以指定應對其進行排序的列：

$(document).ready(function() {
oTable = $('#ctl00_Content_GrdCustomer').dataTable( {
    "aaSorting": [[ 1, "asc" ]]
} );

}）;

API還包含函數fnSort，您可以在初始化后對其進行重新排序，您只需要執行此類調用即可隨時對其進行重新排序：

 // Sort immediately with columns 0 and 1
 oTable.fnSort( [ [0,'asc'], [1,'asc'] ] );