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

Question

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

Answer 1

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

$("table").dataTable();

轰隆隆！并且完成了。

Answer 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。因为它已经存在，所以它只是将它移动到末尾：将最低值移动到末尾，然后将第二低的值移动到（新）端，直到它以最高值结束，最后。

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