首页js 写一个两个单元格一个单元格是升序一个是降序，可以点击

js 写一个两个单元格一个单元格是升序一个是降序，可以点击

时间: 2024-10-03 14:00:51 浏览: 18

要编写一个简单的JavaScript程序，允许用户在一个表格中对两列数据进行升序和降序排序，我们可以创建一个按钮来切换排序方向。这里有一个基本示例： ```html <!DOCTYPE html> <html lang="en"> <head> <style> table { border-collapse: collapse; width: 100%; } th, td { text-align: left; padding: 8px; border-bottom: 1px solid #ddd; } th { cursor: pointer; } </style> </head> <body> <table id="myTable"> <thead> <tr> <th onclick="sortTable(0)">Column 1 (Ascending)</th> <th onclick="sortTable(1)">Column 2 (Descending)</th> </tr> </thead> <tbody>  </tbody> </table> <script> let sortDirection = true; // Default to ascending function sortTable(columnIndex) { const table = document.getElementById('myTable'); const rows = Array.from(table.rows).slice(1); // Skip header row const sortedRows = rows.sort((a, b) => { if (sortDirection) { return a.cells[columnIndex].textContent.localeCompare(b.cells[columnIndex].textContent); } else { return b.cells[columnIndex].textContent.localeCompare(a.cells[columnIndex].textContent); } }); rows.forEach(row => table.tBodies[0].appendChild(row)); sortDirection = !sortDirection; } </script> </body> </html> ``` 在这个例子中，我们有两个表头单元格，`Column 1 (Ascending)` 和 `Column 2 (Descending)`。当用户点击这些标题时，`sortTable()` 函数会被调用，它会改变排序的方向并重新排列表格的数据。每个表头都有 `onclick` 事件，它们触发 `sortTable()` 方法，传入相应的列索引。`sortDirection` 变量用于跟踪当前的排序方向。当排序方向为真（默认），`localeCompare()` 会按照字母顺序进行升序排序；反之则是降序。

阅读全文