2016-11-11 77 views
0

試圖通過僅複製行而不是整個表格對錶格進行排序。單擊列標題時,必須對列的數據進行比較和排序,並重新排列行,但我不知道自己出錯的地方。這裏是我的代碼。使用jQuery單擊每列的標題時對錶格進行排序而不復制整個表格

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

+0

我想你去找一些jquery庫。即可數據表。 –

+0

是的,我已經嘗試過這些,但我想知道如何處理,如上所述。 – Gene

回答

0

更好,如果你使用dhtmlXgrid ...這是更容易實現,並且可以創建要填寫表格,整個數據集的JSON對象。然後,將JSON對象解析爲dhtmlXgrid。通過dhtmlXgrid,排序,列大小,列拖放,行拖放等,所有這些活動都可以自動完成。

相關問題