如何排序表格
学习如何使用 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 | 加拿大 |
创建排序函数
示例
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）
| 名称 | 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 | 加拿大 |
示例
<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>
自己动手试一试 »
