在HTML中，可以使用JavaScript对数据进行排序，以下是一个简单的示例，展示了如何使用JavaScript对表格数据进行排序：
（图片来源网络，侵删）
1、创建一个HTML表格，包含一些数据：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF8">
<meta name="viewport" content="width=devicewidth, initialscale=1.0">
<title>表格排序示例</title>
</head>
<body>
<table id="myTable" border="1">
<thead>
<tr>
<th onclick="sortTable(0)">姓名</th>
<th onclick="sortTable(1)">年龄</th>
<th onclick="sortTable(2)">城市</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>25</td>
<td>北京</td>
</tr>
<tr>
<td>李四</td>
<td>30</td>
<td>上海</td>
</tr>
<tr>
<td>王五</td>
<td>28</td>
<td>深圳</td>
</tr>
</tbody>
</table>
<script src="script.js"></script>
</body>
</html>
2、接下来，创建一个名为script.js的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;
}
}
}
}
这个sortTable函数接受一个参数n，表示要排序的列索引，当用户点击表头时，会触发这个函数，对表格数据进行升序或降序排序。
原创文章，作者：未希，如若转载，请注明出处：https://www.kdun.com/ask/452798.html
微信扫一扫