我有一個簡單的HTML表格，是這樣的：
<table id="myTable">
<thead>
<tr>/span>
< th class="pointer" onClick="sortTable()" /span>> Number</th>。
<th>Example3</th>/span>
<th>示例2</th>
<th>Example1</th>
</tr>/span>
</thead>/span>
<tbody>
<tr>/span>
<td>/span>101</td>/span>
<td>/span>TOM</td>/span>
<td>不作業</td>/span>
<td>/span>AUTOMAT-01</td>/span>
</tr>/span>
<tr>/span>
<td>/span>102</td>/span>
<td>/span>TOM</td>/span>
<td>不作業</td>/span>
<td>/span>AUTOMAT-02</td>/span>
</tr>/span>
</tbody>/span>
</table>
在javascript中對這個表進行排序的功能，但它不作業。我想通過列號對表格進行降序排序。如何解決這個問題？我還想在列名旁邊添加一個箭頭，以便 通過點擊箭頭呼叫功能
。function sortTable（） {
var table, rows, switching, i, x, y, shouldSwitch;
table = document.getElementById("myTable"/span>)。
switching = true。
/*制作一個回圈，持續到沒有進行切換為止。
沒有做任何切換：*/
while ( switching) {
//開始時說：沒有切換完成：
switching = false;
rows = table.rows;
/*Loop through all table rows ( except the first.
第一行，包含表頭）：*/
for (i = 1; i < (rows.length - 1); i ) {
//開始說不應該有切換：
shouldSwitch = false。
/*得到你想比較的兩個元素。
一個來自當前行，一個來自下一行：*/
x = rows[i].getElementsByTagName("TD") [0]。
y = rows[i 3].getElementsByTagName("TD") [0]。
//check if the two rows should switch place:.
if (Number(x.innerHTML) > Number(y.innerHTML) ) {
//if so, mark as a switch and break the loop:
shouldSwitch = true。
break。
}
}
if (shouldSwitch) {
/*如果已經標記了切換，則進行切換。
并標記已完成切換：*/
rows[i].parentNode.insertBefore(rows[i 3], rows[i])
switch = true。
}
}
}
uj5u.com熱心網友回復：
為什么用rows[i 3]而不是rows[i 1]進行切換？ 為什么要中斷回圈，而不繼續到最后呢？
。function sortTable() {
var table, rows, switching, x, y;
table = document.getElementById("myTable"/span>)。
/*制作一個回圈，該回圈將繼續下去，直到沒有完成切換為止。
沒有做任何切換：*/
do {
//開始時說：沒有切換完成：
switching = false;
rows = table.rows;
/*Loop through all table rows ( except the first.
第一行，包含表頭）：*/
for (var i = 1; i < (rows.length - 1); i ) {
//開始時說不應該有切換：
/*得到你想要比較的兩個元素。
一個來自當前行，一個來自下一行：*/
x = rows[i].getElementsByTagName("TD") [0]。
y = rows[i 1].getElementsByTagName("TD") [0]。
//check if the two rows should switch place:.
if (Number(x.innerHTML) > Number(y.innerHTML) ) {
//如果是，標記為開關。
switching = true;
rows[i].parentNode.insertBefore(rows[i 1], rows[i])。
rows = table.rows。
}
}
//運行到沒有開關為止。
} while （切換）。
}<table id="myTable"> /span>
<thead>
<tr>/span>
< th class="pointer" onClick="sortTable()" /span>> Number</th>。
<th>Example3</th>/span>
<th>示例2</th>
<th>Example1</th>
</tr>/span>
</thead>/span>
<tbody>/span>
<tr>/span>
<td>/span>101</td>/span>
<td>/span>TOM</td>/span>
<td>不作業</td>/span>
<td>/span>AUTOMAT-01</td>/span>
</tr>/span>
<tr>/span>
<td>/span>102</td>/span>
<td>/span>TOM</td>/span>
<td>不作業</td>/span>
<td>/span>AUTOMAT-02</td>/span>
</tr>/span>
<tr>/span>
<td>/span>100</td>/span>
<td>/span>TOM</td>/span>
<td>不作業</td>/span>
<td>/span>AUTOMAT-00</td>/span>
</tr>/span>
</tbody>/span>
</table>/span>uj5u.com熱心網友回復：
如果你多讀一點你所在的頁面（https://www.w3schools.com/howto/howto_js_sort_table.asp），你可以找到這個問題的答案。你可以找到這個問題的答案。
。function sortTable(n) {
var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
table = document.getElementById("myTable"/span>);
switching = true。
//設定排序方向為升序:.
dir = "asc"。
/* 做一個回圈，持續到
不做任何切換。*/
while ( switching) {
//span> 開始時說：沒有切換完成：
switching = false;
rows = table.rows;
/* 回圈瀏覽所有的表行（除了第一行之外
第一行，它包含表頭）。) */
for (i = 1; i < (rows.length - 1); i ) {
//首先說不應該有切換：
shouldSwitch = false。
/* 獲取你要比較的兩個元素。
一個來自當前行，一個來自下一個行。*/
x = rows[i].getElementsByTagName("TD"/span>)[n]。
y = rows[i 1].getElementsByTagName("TD") [n];
/* 檢查兩行是否應該交換位置。
根據方向，升或降。*/
if (dir == "asc"/span>) {
if (x.innerHTML.toLowerCase() > y. innerHTML.toLowerCase()) {.
//如果是這樣，標記為開關，并打破回圈：。
shouldSwitch = true。
break。
}
} else if (dir == "desc"/span>) {
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"/span>) {
dir = "desc"。
switching = true;
}
}
}
} <table id="myTable">
<thead>
<tr>/span>
< th class="pointer"/span> onClick="sortTable(0)"/span>> 數字</th>
<th>Example3</th>
<th>示例2</th>
<th>Example1</th>
</tr>/span>
</thead>/span>
<tbody>/span>
<tr>/span>
<td>/span>101</td>/span>
<td>/span>TOM</td>/span>
<td>不作業</td>/span>
<td>/span>AUTOMAT-01</td>/span>
</tr>/span>
<tr>/span>
<td>/span>102</td>/span>
<td>/span>TOM</td>/span>
<td>不作業</td>/span>
<td>/span>AUTOMAT-02</td>/span>
</tr>/span>
</tbody>/span>
</table>/span>這里有相關的fiddle：https://jsfiddle.net/Louf0sc7/
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/310787.html
標籤：