試圖通過僅複製行而不是整個表格對錶格進行排序。單擊列標題時,必須對列的數據進行比較和排序,並重新排列行,但我不知道自己出錯的地方。這裏是我的代碼。使用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>
我想你去找一些jquery庫。即可數據表。 –
是的,我已經嘗試過這些,但我想知道如何處理,如上所述。 – Gene