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

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 id="myTable">

从javascript，使用：

sortTableByColumn("myTable",3);

使用

tBodies[0]因为可能有很多。在您的示例中，只有一个。

如果我们有var arr=[123,456,789]，[].slice.call(arr)会返回一份arr。

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

然后，我们使用内联函数对该数组进行排序，该函数比较两个数组元素：行（<tr>）。

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

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

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

Answer 2

尝试使用数据表，您可以从http://datatables.net获取它的reallt易于使用。取决于jQuery

$("table").dataTable();

热潮！并完成了它。

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

2 个答案: