使用jQuery單擊每列的標題對表進行排序，而無需復制整個表

Question

通過僅復制行而不是整個表來嘗試對表進行排序。 單擊列標題后，必須對列的數據進行比較和排序，並重新排列行，但是我不知道我要去哪里錯了，這是我的代碼。

  <!DOCTYPE html> <html lang="en"> <head> <title>Table Sort</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"> </script> <script type="text/javascript"> $(document).ready(function() { $('th').click(function() { var ColNo = parseInt($(this).index()); var rows= $('tbody').children('tr'); var TotRows = parseInt(rows.length); for (var i = TotRows-1; i >= 0; i--) { for (var j = TotRows-1; j > 0; j--) { var jint = parseInt(j); var frstval = parseInt(rows[jint].getElementsByTagName("td")[ColNo].innerHTML); var scndval = parseInt(rows[jint - 1].getElementsByTagName("td")[ColNo].innerHTML); if (frstval < scndval) { var a = frstval < scndval; alert(a); var sourceRow = $('tr').eq(jint); alert(sourceRow); var targetRow = $('tr').eq(jint-1); targetRow.after(sourceRow.clone()); sourceRow.replaceWith(targetRow); } } } }); }); </script> </head> <body> <table> <thead> <tr> <th>Employee Id</th> <th>Name</th> <th>Age</th> </tr> </thead> <tbody> <tr> <td>11</td> <td>AAA</td> <td>28</td> </tr> <tr> <td>22</td> <td>BBB</td> <td>29</td> </tr> <tr> <td>33</td> <td>CCC</td> <td>21</td> </tr> <tr> <td>44</td> <td>DDD</td> <td>24</td> </tr> </tbody> </table> </body> </html>

Answer 1

如果使用dhtmlXgrid會更好。它更易於實現，並且可以創建要填充表的整個數據集的JSON對象。 然后，只需將JSON對象解析為dhtmlXgrid。 使用dhtmlXgrid，排序，列大小，列拖放，行拖放等，可以自動進行所有此類活動。

使用jQuery單擊每列的標題對表進行排序，而無需復制整個表

問題描述

1 個解決方案

解決方案1
0 2016-11-11 06:14:07

使用jQuery單擊每列的標題對表進行排序，而無需復制整個表

問題描述

1 個解決方案

解決方案1 0 2016-11-11 06:14:07

解決方案1
0 2016-11-11 06:14:07