如何使用基于列索引的 javascript 对 html 表进行排序答案

【问题标题】：How to sort a html table using javascript based on column index如何使用基于列索引的 javascript 对 html 表进行排序
【发布时间】：2026-01-23 08:05:04
【问题描述】：

我正在使用具有结构的表格

<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>

我需要根据标题为“客户名称”的“th”对表格进行排序。浏览了这么多链接，所有链接都根据标题点击进行排序，我不太了解 javascript。请帮忙

【问题讨论】：

你的表是在哪里生成的？如果可能的话，对数据服务器端进行排序可能是一个更好的选择

标签： javascript jquery asp.net html

【解决方案1】：

如果你不太懂javascript，那么我推荐tablesorter：

tablesorter.com

确保已包含 jQuery，然后包含 tablesorter JS 和 CSS 文件。您还需要将头部包装在标签中，将主体包装在标签中。网站上的文档包含您需要的所有信息

【讨论】：

@NewBie 您可以使用选项在 tablesorter 中指定初始排序顺序：tablesorter.com/docs/example-option-sort-list.html

【解决方案2】：

听起来您只想根据特定列对表格进行排序，而无需用户单击来启动它。

您可以使用数据表来做到这一点。当你初始化数据表时，你可以指定它应该在哪一列上排序：

$(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'] ] );

【讨论】：

是的，我想在不单击标题的情况下对行进行排序。数据表？那是javascript吗？我不知道。我正在使用集合绑定网格，我会在 dataTable 中得到它吗？
是的，DataTables 是一个 jQuery 插件：link。如果您只想在初始加载时对表格进行排序，那么对进入网格的数据进行排序可能很简单，或者使用数据网格的排序功能。

【解决方案3】：

我不确定您的具体情况是什么，因为您的帖子缺乏细节，但我认为您可能会发现另一种更易于管理的方法。

如果可以的话，您应该在 JavaScript 中创建一个包含 [6][n] 成员的二维数组，其中 n 是您计划在表中存储的条目数。创建数组后，将所有数据硬编码到数组中。一旦你在数组中获得了数据，你要做的就是对相应的行进行排序，然后使用 for 循环填充一个 html 表。

这种方法会少很多麻烦，因为您不必担心从 HTML 页面加载数据，然后像当前方法一样用新生成的表替换整个表。

如果您有任何问题或需要在下面进一步澄清评论。

干杯，编码快乐！

【讨论】：