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

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。

的副本

我们正在将其喂入tableElement的tBodies[0]。

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

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

forEach通过数组的元素，该元素现在按顺序进行，将appendChild行交给了Tbody。因为它已经存在，所以它只是将其移动到末端：将最低值移至末端，然后将第二个最低的端移至（新的）端，直到它以最高值结束。

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

Answer 2

尝试使用DataTables您可以从http://datatables.net易于使用。取决于jQuery

$("table").dataTable();

繁荣！