如何创建 - 对表格进行排序
了解如何使用 JavaScript 对 HTML 表格进行排序。
单击按钮可根据客户名称按字母顺序对表格进行排序:
| 名称 | Country |
|---|---|
| Berglunds snabbkop | Sweden |
| North/South | UK |
| Alfreds Futterkiste | Germany |
| Koniglich Essen | Germany |
| Magazzini Alimentari Riuniti | Italy |
| Paris specialites | France |
| Island Trading | UK |
| Laughing Bacchus Winecellars | Canada |
创建排序函数
实例
function sortTable() {
var table, rows, switching, i, x, y,
shouldSwitch;
table = document.getElementById("myTable");
switching = true;
/* Make a loop that will continue until
no switching has been done: */
while (switching) {
// Start by saying: no switching is done:
switching =
false;
rows = table.rows;
/* Loop through all table rows (except the
first, which
contains table headers): */
for (i = 1; i < (rows.length
- 1); i++) {
// Start by saying there should
be no switching:
shouldSwitch = false;
/* Get the two elements you want to compare,
one from current row and one from the next: */
x = rows[i].getElementsByTagName("TD")[0];
y
= rows[i + 1].getElementsByTagName("TD")[0];
// Check if the two rows should switch place:
if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
// If so, mark as a switch and break the loop:
shouldSwitch = true;
break;
}
}
if (shouldSwitch) {
/* If a switch has been marked, make the switch
and mark that a switch has been done: */
rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
switching = true;
}
}
}
亲自试一试 »
通过单击标题对表格进行排序
单击标题对表格进行排序。
点击 "Name" 按名称排序，点击 "Country" 按地区排序。
第一次点击，排序方向为升序（A到Z）。
再次点击，排序方向为降序（Z到A）:
| 名称 | Country |
|---|---|
| Berglunds snabbkop | Sweden |
| North/South | UK |
| Alfreds Futterkiste | Germany |
| Koniglich Essen | Germany |
| Magazzini Alimentari Riuniti | Italy |
| Paris specialites | France |
| Island Trading | UK |
| Laughing Bacchus Winecellars | Canada |
实例
<table id="myTable2">
<tr>
<!--点击标题时，运行带参数 sortTable 函数，
0 按名称排序，1 按地区排序: -->
<th onclick="sortTable(0)">Name</th>
<th onclick="sortTable(1)">Country</th>
</tr>
...
<script>
function sortTable(n) {
var table,
rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
table
= document.getElementById("myTable2");
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];
/* 检查两行是否应该交换位置，
基于方向，asc 或 desc:*/
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;
// 每次切换完成时，将此计数增加 1:
switchcount
++;
} else {
/* 如果没有切换并且方向是 "asc",
将方向设置为 "desc" 并再次运行 while 循环。 */
if (switchcount == 0 && dir == "asc") {
dir = "desc";
switching = true;
}
}
}
}
</script>
亲自试一试 »
