js怎么实现页面数据排序 要求table里的第一列不参加排序、??
1条回答
- shxs875 2023-06-22 12:31关注
在实现页面数据排序时,可以使用 JavaScript 来动态改变表格中数据的顺序。下面是一个简单的按照其中的某一列排序的示例代码,对于第一列不排序的情况,可以在排序时指定要排序的数据列,而不包括第一列。
<table id="data-table"> <thead> <tr> <th>#</th> <th>Name</th> <th>Age</th> <th>City</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Lucy</td> <td>23</td> <td>New York</td> </tr> <tr> <td>2</td> <td>Jack</td> <td>25</td> <td>London</td> </tr> <tr> <td>3</td> <td>Mike</td> <td>27</td> <td>Tokyo</td> </tr> </tbody> </table> <script> var table = document.getElementById('data-table'); var rows = table.rows; var sortingColumnIndex = 2; function sortTable() { var sortedRows = Array.from(rows).slice(1); // 第一行不参与排序 sortedRows.sort(function(rowA, rowB) { var cellA = rowA.cells[sortingColumnIndex].textContent; var cellB = rowB.cells[sortingColumnIndex].textContent; return cellA.localeCompare(cellB); // 按照内容进行排序 }); for (var i = 0; i < sortedRows.length; i++) { table.tBodies[0].appendChild(sortedRows[i]); // 更新表格中的排序后的行 } } function resetTable() { for (var i = 1; i < rows.length; i++) { table.tBodies[0].appendChild(rows[i]); // 将表格行重新排序为文档顺序 } } table.addEventListener('click', function(event) { if (event.target.tagName === 'TH' && event.target.cellIndex !== 0) { // 第一列不参与排序 sortingColumnIndex = event.target.cellIndex; sortTable(); } }); </script>
在上述代码中,我们首先获取了表格对象、表格行以及指定要排序的数据列。然后,我们定义了 sortTable 和 resetTable 函数,用于执行表格数据排序和清除排序状态。在 click 事件处理函数中,我们判断是否点击了表格头部的单元格,并且排除了第一列,然后更新排序的列,并执行 sortTable 函数来动态改变表格中数据的排列顺序。
解决 无用评论 打赏 举报
悬赏问题
- ¥15 素材场景中光线烘焙后灯光失效
- ¥15 请教一下各位,为什么我这个没有实现模拟点击
- ¥15 执行 virtuoso 命令后,界面没有,cadence 启动不起来
- ¥50 comfyui下连接animatediff节点生成视频质量非常差的原因
- ¥20 有关区间dp的问题求解
- ¥15 多电路系统共用电源的串扰问题
- ¥15 slam rangenet++配置
- ¥15 有没有研究水声通信方面的帮我改俩matlab代码
- ¥15 ubuntu子系统密码忘记
- ¥15 保护模式-系统加载-段寄存器