使用 Javascript 选择表中的列并对其进行排序

Posted 2023-03-05

【中文标题】使用 Javascript 选择表中的列并对其进行排序

【英文标题】：Select and sort a column in a table using Javascript

【发布时间】：2017-05-12 15:43:24

【问题描述】：

我想选择表格的特定列并使用 javascript（无框架或插件）对其进行相应排序。有人可以帮我解决这个问题吗？

<table>
        <thead>
            <tr>
                <td>Col1</td>
                <td>Col2</td>
                <td>Col3</td>
                <td>Col4</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Data11</td>
                <td>Data23</td>
                <td>Data53</td>
                <td>Data45</td>
            </tr>
            <tr>
                <td>Data81</td>
                <td>Data42</td>
                <td>Data33</td>
                <td>Data4854</td>
            </tr> 
            <tr>
                <td>Data84681</td>
                <td>Data452</td>
                <td>Data354</td>
                <td>Data448</td>
            </tr> 
            <tr>
                <td>Data1846</td>
                <td>Data25635</td>
                <td>Data3232</td>
                <td>Data44378</td>
            </tr> 
        </tbody>
    </table>

【参考方案1】：

尝试使用数据表，您可以从http://datatables.net 获得它，它非常易于使用。依赖于 jQuery

$("table").dataTable();

轰隆隆！并且完成了。

【讨论】：

无论如何只使用Javascript（没有框架或插件）来做到这一点？

【参考方案2】：

function sortTableByColumn(tableId,columnNumber)  // (string,integer)
  var tableElement=document.getElementById(tableId);
  [].slice.call(tableElement.tBodies[0].rows).sort(function(a, b) 
    return (
      a.cells[columnNumber-1].textContent<b.cells[columnNumber-1].textContent?-1:
      a.cells[columnNumber-1].textContent>b.cells[columnNumber-1].textContent?1:
      0);
  ).forEach(function(val, index) 
    tableElement.tBodies[0].appendChild(val);
  );

在您的页面中，将 id 添加到 table 标签：

<table id="myTable">

在 javascript 中，使用：

sortTableByColumn("myTable",3);

tBodies[0] 被使用是因为可以有很多。在您的示例中只有一个。

如果我们有 var arr=[123,456,789]，[].slice.call(arr) 返回 arr 的副本。

我们正在为它提供 html-rows-collection，在 tBodies[0] 中找到 tableElement。

然后，我们使用一个比较两个数组元素的内联函数对该数组进行排序，这里是：行 (<tr>)。

使用cells[columnNumber] 我们访问<td>s，并使用textContent 访问文本内容。我使用了columnNumber-1，因此您可以为第三列输入 3 而不是 2，因为数组的第一个元素（第 1 列）的索引是 0...

forEach 遍历数组的元素，这已经是有序的，appendChild 行到 tBody。因为它已经存在，所以它只是将它移动到末尾：将最低值移动到末尾，然后将第二低的值移动到（新）端，直到它以最高值结束，最后。

我希望这是你想要的。如果是这样，请享受！

【讨论】：

您说的是“选择” - 如果您的意思是单击列标题，请告诉我。我也这样做了，并且会尽量记住在这里分享。

唯一的缺点是它不会“一次性”附加，我假设在一个大表中可能会有一些视觉排序，我想你可以复制数组中的行和更改 table.rows 属性

我的回答对您有帮助吗？如果是这样，请选择并投票。谢谢！