如何 - 对表格进行排序
学习如何使用 JavaScript 对 HTML 表格进行排序。
单击按钮，根据客户名称按字母顺序对表格进行排序
| 名称 | 国家 |
|---|---|
| Berglunds snabbkop | 瑞典 |
| North/South | 英国 |
| Alfreds Futterkiste | 德国 |
| Koniglich Essen | 德国 |
| Magazzini Alimentari Riuniti | 意大利 |
| Paris specialites | 法国 |
| Island Trading | 英国 |
| Laughing Bacchus Winecellars | 加拿大 |
创建排序函数
示例
function sortTable() {
var table, rows, switching, i, x, y, shouldSwitch;
table = document.getElementById("myTable");
switching = true;
/* 循环，直到
没有进行过交换： */
while (switching) {
// 从说：没有进行过交换开始
switching = false;
rows = table.rows;
/* 循环遍历所有表格行（除了
第一行，它包含表格标题）： */
for (i = 1; i < (rows.length - 1); i++) {
// 从说不应该进行交换开始
shouldSwitch = false;
/* 获取要比较的两个元素，
从当前行和下一行各取一个： */
x = rows[i].getElementsByTagName("TD")[0];
y = rows[i + 1].getElementsByTagName("TD")[0];
// 检查这两行是否需要交换位置
if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
// 如果需要，标记为需要交换并跳出循环
shouldSwitch = true;
break;
}
}
if (shouldSwitch) {
/* 如果已标记需要交换，则进行交换
并标记已进行交换： */
rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
switching = true;
}
}
}
尝试一下 »
通过点击表头排序表格
点击表头对表格进行排序。
点击“姓名”按姓名排序，点击“国家”按国家排序。
第一次点击时，排序方向为升序 (A 到 Z)。
再次点击，排序方向将变为降序 (Z 到 A)
| 名称 | 国家 |
|---|---|
| Berglunds snabbkop | 瑞典 |
| North/South | 英国 |
| Alfreds Futterkiste | 德国 |
| Koniglich Essen | 德国 |
| Magazzini Alimentari Riuniti | 意大利 |
| Paris specialites | 法国 |
| Island Trading | 英国 |
| Laughing Bacchus Winecellars | 加拿大 |
示例
<table id="myTable2">
<tr>
<!--当点击表头时，运行 sortTable 函数，并传递参数，
0 表示按姓名排序，1 表示按国家排序： -->
<th onclick="sortTable(0)">姓名</th>
<th onclick="sortTable(1)">国家</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];
/* 检查这两行是否需要交换位置，
基于方向，升序或降序： */
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>
尝试一下 »
