使用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)返回[].slice.call(arr)的副本。

我們正在向它提供html-rows-collection，該tBodies[0]在tBodies[0]中tableElement 。

然后，我們使用一個內聯函數對該數組進行排序，該函數比較兩個數組元素，在這里是：行（ <tr> ）。

使用cells[columnNumber]我們訪問<td> ，並使用textContent訪問文本內容。 我使用了columnNumber-1因此您可以在第三列而不是2處輸入3，因為數組（第1列）的第一個元素的索引為0 ...

forEach遍歷數組的所有元素（到現在為止是按順序排列），並將appendChild行附加到tBody。 因為它已經存在，所以將其移到末尾：將最低的值移到末尾，然后將第二低的值移到（新）末尾，直到最后以最高值結束。

我希望這就是你想要的。 如果是這樣，請盡情享受！

Answer 2

嘗試使用數據表，您可以從http://datatables.net獲得數據，其易於使用。 取決於jQuery

$("table").dataTable();

繁榮！ 和完成。