写一份JavaScript代码来实现对前端每个表格单独排序,表格class="tableSort",注意:每个表格的HTML结构不同,表头单元格的HTML结构也不同
时间: 2024-04-30 08:17:36 浏览: 14
当然,我可以为你提供这样的JavaScript代码来实现对前端每个表格单独排序,表格class="tableSort":
```javascript
// 遍历所有class为tableSort的表格
var tables = document.getElementsByClassName("tableSort");
Array.prototype.forEach.call(tables, function(table) {
// 获取表格的所有表头单元格
var ths = table.getElementsByTagName("th");
// 遍历所有表头单元格
Array.prototype.forEach.call(ths, function(th) {
// 给每个表头单元格设置可点击排序事件
th.onclick = function() {
var rows = table.getElementsByTagName("tr");
var columnIndex = th.cellIndex;
var switching = true;
var direction = "asc";
while(switching) {
switched = false;
// 遍历表格的每行数据
for (var i = 1, len = rows.length - 1; i < len; i++) {
var shouldSwitch = false;
var rowA = rows[i].getElementsByTagName("td")[columnIndex];
var rowB = rows[i+1].getElementsByTagName("td")[columnIndex];
// 判断排序方式
if (direction == "asc") {
if (rowA.innerHTML.toLowerCase() > rowB.innerHTML.toLowerCase()) {
shouldSwitch= true;
break;
}
} else if (direction == "desc") {
if (rowA.innerHTML.toLowerCase() < rowB.innerHTML.toLowerCase()) {
shouldSwitch= true;
break;
}
}
}
if (shouldSwitch) {
rows[i].parentNode.insertBefore(rows[i+1], rows[i]);
switching = true;
switched = true;
} else {
if (!switched && direction == "asc") {
direction = "desc";
switching = true;
}
}
}
}
});
});
```
这段JavaScript代码可以实现对前端每个表格单独排序,具体实现方法为遍历页面上所有class为"tableSort"的表格,然后对每个表格的表头单元格设置可点击排序事件,在点击时可以对该表格的所有行数据进行排序,并支持升序和降序排序方式。
需要注意的是,由于每个表格的HTML结构不同,该代码中并没有假设任何HTML结构,而是通过获取元素的方式进行操作。