js代码前端对表格排序
时间: 2023-12-21 17:49:19 浏览: 31
好的,我可以为您提供一些有关 JavaScript 前端对表格排序的代码示例。下面是一个基本的示例:
1. HTML
```html
<table id="myTable">
<thead>
<tr>
<th onclick="sortTable(0)">Name</th>
<th onclick="sortTable(1)">Age</th>
<th onclick="sortTable(2)">Country</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>25</td>
<td>USA</td>
</tr>
<tr>
<td>Alice</td>
<td>32</td>
<td>France</td>
</tr>
<tr>
<td>Bob</td>
<td>18</td>
<td>UK</td>
</tr>
</tbody>
</table>
```
2. JavaScript
```javascript
function sortTable(n) {
var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
table = document.getElementById("myTable");
switching = true;
dir = "asc";
while (switching) {
switching = false;
rows = table.rows;
for (i = 1; i < (rows.length - 1); i++) {
shouldSwitch = false;
x = rows[i].getElementsByTagName("td")[n];
y = rows[i + 1].getElementsByTagName("td")[n];
if (dir == "asc") {
if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
shouldSwitch= true;
break;
}
} else if (dir == "desc") {
if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
shouldSwitch= true;
break;
}
}
}
if (shouldSwitch) {
rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
switching = true;
switchcount ++;
} else {
if (switchcount == 0 && dir == "asc") {
dir = "desc";
switching = true;
}
}
}
}
```
这是一个简单的前端排序表格的示例,只需要在表头中的每一列添加一个带排序函数属性的链接即可实现。希望能对您有所帮助。