在頁面加載時按字母順序對html表進行排序

Question

我正在尋找在頁面加載時按字母順序對html表進行排序的方式，與對無序列表進行排序的方式相同。

我嘗試使用下面的代碼，但是沒有用：

    var mylist = $('#myTable');
var listitems = mylist.children('tr').get();
listitems.sort(function(a, b) {
   return $(a).text().toUpperCase().localeCompare($(b).text().toUpperCase());
})
$.each(listitems, function(idx, itm) { mylist.append(itm); });

接着

<table id="myTable">
<tr>
<td>B</td>
<td>12/01/2016</td>
</tr>
<tr>
<td>A</td>
<td>12/01/2016</td>
</tr>
</table>

我希望它按行的第一列按字母順序對表進行排序。

我在網上找不到有關此的任何信息。

Answer 1

您的問題是此行未返回您的trs：

var listitems = mylist.children('tr').get();

修改為以下內容，一切正常。

var listitems = mylist.find('tr');

 var mylist = $('#myTable'); var listitems = mylist.find('tr'); listitems.sort(function(a, b) { return $(a).text().toUpperCase().localeCompare($(b).text().toUpperCase()); }) $.each(listitems, function(idx, itm) { mylist.append(itm); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table id="myTable"> <tr> <td>B</td> <td>12/01/2016</td> </tr> <tr> <td>A</td> <td>12/01/2016</td> </tr> </table> 

Answer 2

這是我使用的摘錄。 注意：這比使用jquery find（）更快

 function sortTable(){ var table = document.getElementById("myTable"); var Arr = []; for(var i=0, ln=table.rows.length; i<ln; i++){ var row = table.rows[i]; var firstCell = row.cells[0].textContent; Arr.push([firstCell, row]); //temporary array } //sort by first column of inner arrays Arr = Arr.sort(function(a,b) { return a[0] > b[0]; }); for(var i=0, ln=Arr.length; i<ln; i++){ table.appendChild(Arr[i][1]); } Arr = null; } sortTable(); 

 <table id="myTable"> <tr> <td>d</td> <td>12/03/2016</td> </tr> <tr> <td>B</td> <td>12/01/2016</td> </tr> <tr> <td>A</td> <td>12/04/2016</td> </tr> <tr> <td>C</td> <td>12/04/2016</td> </tr> </table>