如何排序表格
學習如何使用 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>
自己動手試一試 »
