如何使用基于列索引的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'] ] );