如何使用 JQuery 對表列進行升序和降序排序？

Question

在下面的代碼中，我只能按升序對表格進行排序。 當我第二次單擊表格標題時，它不會將順序切換為降序。

誰能幫助我如何在兩個方向對表格列進行排序？ 有沒有其他方法可以對表格數據中的文本框值進行排序？

 $("#sortcol").click(function() { const table = document.getElementById('tab_logic'); const headers = table.querySelectorAll('th'); const tableBody = table.querySelector('tbody'); const rows = tableBody.querySelectorAll('tr'); const directions = Array.from(headers).map(function(header) { return ''; }); const transform = function(index, content) { const type = headers[index].getAttribute('data-type'); switch (type) { case 'number': return parseFloat(content); case 'string': default: return content; } }; const sortColumn = function(index) { const direction = directions[index] || 'asc'; const multiplier = direction === 'asc' ? 1 : -1; const newRows = Array.from(rows); newRows.sort(function(rowA, rowB) { const cellA = rowA.getElementsByTagName("td")[index]; const cellB = rowB.getElementsByTagName("td")[index]; const cellC = $(cellA).find('input').val(); const cellD = $(cellB).find('input').val(); const a = transform(index, cellC); const b = transform(index, cellD); switch (true) { case a > b: return 1 * multiplier; case a < b: return -1 * multiplier; case a === b: return 0; } }); [].forEach.call(rows, function(row) { tableBody.removeChild(row); }); directions[index] = direction === 'asc' ? 'desc' : 'asc'; newRows.forEach(function(newRow) { tableBody.appendChild(newRow); }); }; sortColumn(1); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table id="tab_logic" style="width: 40%; border: 1px solid black;"> <thead> <tr> <th data-type="number">check</th> <th id="sortcol">Description</th> </tr> </thead> <tbody> <tr> <td> <input type="checkbox"> </td> <td> <input type="text" Value=" MySQL"> </td> </tr> <tr> <td> <input type="checkbox"> </td> <td> <input type="text" Value=" Python"> </td> </tr> <tr> <td> <input type="checkbox"> </td> <td> <input type="text" Value=" Javascript"> </td> </tr> <tr> <td> <input type="checkbox"> </td> <td> <input type="text" Value=" Angular JS"> </td> </tr> <tr> <td> <input type="checkbox"> </td> <td> <input type="text" Value=" Csharp"> </td> </tr> </tbody> </table>

Answer 1

您的代碼非常好，唯一的問題是當您單擊它時，方向變量正在重置並且“asc”值沒有保留到數組中。 請檢查以下代碼。

 var rows; var directions; var headers; var tableBody; $(document).ready(function(){ const table = document.getElementById('tab_logic'); headers = table.querySelectorAll('th'); tableBody = table.querySelector('tbody'); rows = tableBody.querySelectorAll('tr'); directions = Array.from(headers).map(function(header) { return ''; }); }) const transform = function(index, content) { const type = headers[index].getAttribute('data-type'); switch (type) { case 'number': return parseFloat(content); case 'string': default: return content; } }; const sortColumn = function(index) { const direction = directions[index] || 'asc'; const multiplier = direction === 'asc' ? 1 : -1; const newRows = Array.from(rows); newRows.sort(function(rowA, rowB) { const cellA = rowA.getElementsByTagName("td")[index]; const cellB = rowB.getElementsByTagName("td")[index]; const cellC = $(cellA).find('input').val(); const cellD = $(cellB).find('input').val(); const a = transform(index, cellC); const b = transform(index, cellD); switch (true) { case a > b: return 1 * multiplier; case a < b: return -1 * multiplier; case a === b: return 0; } }); [].forEach.call(rows, function(row) { tableBody.removeChild(row); }); newRows.forEach(function(newRow) { tableBody.appendChild(newRow); }); directions[index] = direction === 'asc' ? 'desc' : 'asc'; }; $("#sortcol").click(function() { sortColumn(1); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table id="tab_logic" style="width: 40%; border: 1px solid black;"> <thead> <tr> <th data-type="number">check</th> <th id="sortcol">Description</th> </tr> </thead> <tbody> <tr> <td> <input type="checkbox"> </td> <td> <input type="text" Value=" MySQL"> </td> </tr> <tr> <td> <input type="checkbox"> </td> <td> <input type="text" Value=" Python"> </td> </tr> <tr> <td> <input type="checkbox"> </td> <td> <input type="text" Value=" Javascript"> </td> </tr> <tr> <td> <input type="checkbox"> </td> <td> <input type="text" Value=" Angular JS"> </td> </tr> <tr> <td> <input type="checkbox"> </td> <td> <input type="text" Value=" Csharp"> </td> </tr> </tbody> </table>