html页面的点击表头升序降序代码
时间: 2024-05-02 13:04:38 浏览: 9
下面是一个简单的示例代码,可以实现点击表头进行升序和降序排列:
```html
<!DOCTYPE html>
<html>
<head>
<title>Table Sort Example</title>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<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>Jane</td>
<td>30</td>
<td>Canada</td>
</tr>
<tr>
<td>Bob</td>
<td>20</td>
<td>UK</td>
</tr>
</tbody>
</table>
<script>
function sortTable(colIndex) {
var table = document.getElementById("myTable");
var rows = table.rows;
var switching = true;
var shouldSwitch = false;
while (switching) {
switching = false;
for (var i = 1; i < rows.length - 1; i++) {
shouldSwitch = false;
var x = rows[i].getElementsByTagName("td")[colIndex];
var y = rows[i + 1].getElementsByTagName("td")[colIndex];
if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
shouldSwitch = true;
break;
}
}
if (shouldSwitch) {
rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
switching = true;
}
}
}
</script>
</body>
</html>
```
这段代码中,我们创建了一个包含三列的表格,每一列的表头都绑定了一个 `onclick` 事件,当点击表头时,会调用 `sortTable` 函数进行排序。排序使用了冒泡排序算法,通过比较表格中两行的值,交换它们的位置来实现排序。在比较时,我们将每一行中指定列的值取出来,并将它们转换为小写字母进行比较,以确保排序结果的正确性。