js怎么实现页面数据排序 要求table里的第一列不参加排序、??
在实现页面数据排序时,可以使用 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 函数来动态改变表格中数据的排列顺序。