[英]Sort Table in HTML & Javascript - issue with first column
我使用此代碼創建了可以排序的表: https : //www.w3schools.com/howto/tryit.asp?filename=tryhow_js_sort_table_desc
我的問題是,第2、3和4列將毫無問題地進行排序,但第一個不是。 基本上,如果我按照示例進行操作,則始終是排序的下一列,而不是我單擊的列。 因此,我使用n-1而不是n調整了腳本以過濾適當的列,但是這阻止了我過濾第一個。 我不知道這個問題是從哪里來的。
<div>
<table id="myTable">
<colgroup>
<col span="1" style="width: 45%;">
<col span="1" style="width: 20%;">
<col span="1" style="width: 20%;">
<col span="1" style="width: 20%;">
</colgroup>
<tr>
<!--When a header is clicked, run the sortTable function, with a parameter, 0 for sorting by names, 1 for sorting by country:-->
<th onclick="sortTable(0)">Scenario</th>
<th onclick="sortTable(0)">Delta returns</th>
<th onclick="sortTable(1)">Sensitivity</th>
<th onclick="sortTable(2)">Delta volatility</th>
</tr>
<tr>
<th>Scenario 1</th>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<th>Scenario 2</th>
<td>7</td>
<td>1</td>
<td>5</td>
</tr>
<tr>
<th>Scenario 3</th>
<td>5</td>
<td>1</td>
<td>0</td>
</tr>
<tr>
<th>Scenario 4</th>
<td>0</td>
<td>2</td>
<td>7</td>
</tr>
</table>
</div>
劇本。
<script>
function sortTable(n) {
var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
table = document.getElementById("myTable");
switching = true;
//Set the sorting direction to ascending:
dir = "asc";
/*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.getElementsByTagName("TR");
/*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")[n-1];
y = rows[i + 1].getElementsByTagName("TD")[n-1];
/*check if the two rows should switch place,
based on the direction, asc or desc:*/
if (dir == "asc") {
if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
//if so, mark as a switch and break the loop:
shouldSwitch= true;
break;
}
} else if (dir == "desc") {
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;
//Each time a switch is done, increase this count by 1:
switchcount ++;
} else {
/*If no switching has been done AND the direction is "asc",
set the direction to "desc" and run the while loop again.*/
if (switchcount == 0 && dir == "asc") {
dir = "desc";
switching = true;
}
}
}
}
</script>
和相關的CSS:
table {
border-collapse: collapse;
border-spacing: 0;
height:400px;
border: 1px solid #ddd;
overflow-y: scroll;
overflow-x: scroll;
display: block;
font-family: helvetica;
font-size:12px;
}
th, td {
text-align: left;
padding: 8px;
}
tr:nth-child(even){background-color: #002560;
color:white;
}
th {
cursor: pointer;
}
您正在使用getElementsByTagName
但是每行的第一個單元格是TH
元素。 不考慮TH,因此您無法對其進行過濾,並且索引偏離1,因為第0列將是第一個TD元素(這是您的第二列)。 您可以用TD
替換TH
並使用普通索引( n
而不是n - 1
)。
或者,您可以使用children
來代替getElementsByTagName
,這將返回所有子項,無論其標記名稱是什么。 同樣在這里,使用普通索引(第一列為0,第二列為1,依此類推)。
https://developer.mozilla.org/zh-CN/docs/Web/API/ParentNode/children
像這樣:
x = rows[i].children[n];
y = rows[i + 1].children[n];
嘗試從0開始而不是從1開始。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.