3

我想选择表格的特定列并使用 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>
4

2 回答 2

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

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

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

forEach遍历数组的元素，现在按顺序排列，然后排到appendChildtBody。因为它已经存在，所以它只是将其移动到末尾：将最低值移动到末尾，然后将第二低的值移动到（新）端，直到它以最高值结束，最后。

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

于 2017-02-27T02:09:14.360 回答
0

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

$("table").dataTable();

繁荣！并完成。

于 2016-12-28T11:08:01.317 回答