如何使用 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>