使用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它的reallt易於使用。取決於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 id="myTable"> 

從JavaScript，使用：

sortTableByColumn("myTable",3); 

tBodies[0]被使用，因爲可以有很多。在你的例子中只有一個。

如果我們有var arr=[123,456,789],[].slice.call(arr)返回arr的副本。

我們正在爲它提供html-rows集合，發現在tableElement的tBodies[0]。

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

使用cells[columnNumber]我們訪問<td> s和textContent來訪問文本內容。我用columnNumber-1，所以你可以輸入3作爲第三列而不是2，因爲數組的第一個元素（第一列）的索引是0 ...

forEach經過數組元素，現在是按順序，並且appendChild排到tBody。因爲它已經存在，所以它將它移動到最後：將最低值移到末尾，然後將第二低移動到（新）末端，直到最後以最高值結束。

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