【发布时间】：2018-08-25 04:36:34
【问题描述】：
<!DOCTYPE html>
<html>
<head>
<title>Links Test for Stack</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#AllTable {
border-collapse: collapse;
/* Collapse borders */
width: 100%;
/* Full-width */
border: 1px solid #ddd;
/* Add a grey border */
font-size: 18px;
/* Increase font-size */
}
</style>
</head>
<body>
<div>
<input type="button" value="Sort" onclick="sortTable()" ;><br>
</div>
<div id="All" class="tabcontent">
<h3>All Links</h3>
<table id="AllTable">
<caption></caption>
<tr>
<th>LINK</th>
<th>DESCRIPTION</th>
<th>CATEGORY</th>
</tr>
<tr><td><a href="http://lycos.com" target="_blank" alt="none">Goldie</a></td><td>Goldie description</td><td>Goldie category</td>
<tr><td><a href="http://networkadvertising.org" target="_blank" alt="none">Ericha</a></td><td>Ericha description</td><td>Ericha category</td>
<tr><td><a href="http://google.cn" target="_blank" alt="none">Karel</a></td><td>Karel description</td><td>Karel category</td>
<tr><td><a href="https://addthis.com" target="_blank" alt="none">Jack</a></td><td>Jack description</td><td>Jack category</td>
<tr><td><a href="http://purevolume.com" target="_blank" alt="none">Meredith</a></td><td>Meredith description</td><td>Meredith category</td>
<tr><td><a href="https://chicagotribune.com" target="_blank" alt="none">Emilia</a></td><td>Emilia description</td><td>Emilia category</td>
<tr><td><a href="https://cnn.com" target="_blank" alt="none">Jenifer</a></td><td>Jenifer description</td><td>Jenifer category</td>
<tr><td><a href="https://indiatimes.com" target="_blank" alt="none">Wolfy</a></td><td>Wolfy description</td><td>Wolfy category</td>
<tr><td><a href="http://multiply.com" target="_blank" alt="none">Jaynell</a></td><td>Jaynell description</td><td>Jaynell category</td>
<tr><td><a href="https://mail.ru" target="_blank" alt="none">Melissa</a></td><td>Melissa description</td><td>Melissa category</td>
<tr><td><a href="https://archive.org" target="_blank" alt="none">Constantine</a></td><td>Constantine description</td><td>Constantine category</td>
<tr><td><a href="https://icio.us" target="_blank" alt="none">Dulsea</a></td><td>Dulsea description</td><td>Dulsea category</td>
<tr><td><a href="http://statcounter.com" target="_blank" alt="none">Serene</a></td><td>Serene description</td><td>Serene category</td>
<tr><td><a href="https://cyberchimps.com" target="_blank" alt="none">Chad</a></td><td>Chad description</td><td>Chad category</td>
<tr><td><a href="https://wikia.com" target="_blank" alt="none">Jeana</a></td><td>Jeana description</td><td>Jeana category</td>
<tr><td><a href="https://ow.ly" target="_blank" alt="none">Jody</a></td><td>Jody description</td><td>Jody category</td>
<tr><td><a href="https://xrea.com" target="_blank" alt="none">Blinnie</a></td><td>Blinnie description</td><td>Blinnie category</td>
<tr><td><a href="http://etsy.com" target="_blank" alt="none">Rene</a></td><td>Rene description</td><td>Rene category</td>
<tr><td><a href="https://ocn.ne.jp" target="_blank" alt="none">Pegeen</a></td><td>Pegeen description</td><td>Pegeen category</td>
<tr><td><a href="http://redcross.org" target="_blank" alt="none">Shep</a></td><td>Shep description</td><td>Shep category</td>
<tr><td><a href="https://nature.com" target="_blank" alt="none">Alasdair</a></td><td>Alasdair description</td><td>Alasdair category</td>
<tr><td><a href="http://symantec.com" target="_blank" alt="none">Vanni</a></td><td>Vanni description</td><td>Vanni category</td>
<tr><td><a href="https://hibu.com" target="_blank" alt="none">Adamo</a></td><td>Adamo description</td><td>Adamo category</td>
<tr><td><a href="http://marketwatch.com" target="_blank" alt="none">Rahal</a></td><td>Rahal description</td><td>Rahal category</td>
<tr><td><a href="http://foxnews.com" target="_blank" alt="none">Elbertina</a></td><td>Elbertina description</td><td>Elbertina category</td>
<tr><td><a href="https://mtv.com" target="_blank" alt="none">Lauree</a></td><td>Lauree description</td><td>Lauree category</td>
<tr><td><a href="https://newyorker.com" target="_blank" alt="none">Elnora</a></td><td>Elnora description</td><td>Elnora category</td>
<tr><td><a href="http://rediff.com" target="_blank" alt="none">Mahmud</a></td><td>Mahmud description</td><td>Mahmud category</td>
<tr><td><a href="https://last.fm" target="_blank" alt="none">Bette</a></td><td>Bette description</td><td>Bette category</td>
<tr><td><a href="http://macromedia.com" target="_blank" alt="none">Sayres</a></td><td>Sayres description</td><td>Sayres category</td>
<tr><td><a href="https://bandcamp.com" target="_blank" alt="none">Darci</a></td><td>Darci description</td><td>Darci category</td>
<tr><td><a href="https://chronoengine.com" target="_blank" alt="none">Stanley</a></td><td>Stanley description</td><td>Stanley category</td>
<tr><td><a href="http://sciencedaily.com" target="_blank" alt="none">Anthony</a></td><td>Anthony description</td><td>Anthony category</td>
<tr><td><a href="https://java.com" target="_blank" alt="none">Pryce</a></td><td>Pryce description</td><td>Pryce category</td>
<tr><td><a href="http://arstechnica.com" target="_blank" alt="none">Ezmeralda</a></td><td>Ezmeralda description</td><td>Ezmeralda category</td>
<tr><td><a href="http://google.de" target="_blank" alt="none">Bliss</a></td><td>Bliss description</td><td>Bliss category</td>
<tr><td><a href="https://meetup.com" target="_blank" alt="none">Leigh</a></td><td>Leigh description</td><td>Leigh category</td>
<tr><td><a href="http://earthlink.net" target="_blank" alt="none">Merrie</a></td><td>Merrie description</td><td>Merrie category</td>
<tr><td><a href="https://comcast.net" target="_blank" alt="none">Dewain</a></td><td>Dewain description</td><td>Dewain category</td>
<tr><td><a href="http://nifty.com" target="_blank" alt="none">Dorothee</a></td><td>Dorothee description</td><td>Dorothee category</td>
<tr><td><a href="https://springer.com" target="_blank" alt="none">Glennis</a></td><td>Glennis description</td><td>Glennis category</td>
<tr><td><a href="http://dailymotion.com" target="_blank" alt="none">Tripp</a></td><td>Tripp description</td><td>Tripp category</td>
<tr><td><a href="https://cisco.com" target="_blank" alt="none">Clyve</a></td><td>Clyve description</td><td>Clyve category</td>
<tr><td><a href="http://nbcnews.com" target="_blank" alt="none">Corny</a></td><td>Corny description</td><td>Corny category</td>
<tr><td><a href="http://t.co" target="_blank" alt="none">Robena</a></td><td>Robena description</td><td>Robena category</td>
<tr><td><a href="https://netscape.com" target="_blank" alt="none">Nikolaus</a></td><td>Nikolaus description</td><td>Nikolaus category</td>
<tr><td><a href="https://walmart.com" target="_blank" alt="none">Cassie</a></td><td>Cassie description</td><td>Cassie category</td>
<tr><td><a href="http://youtube.com" target="_blank" alt="none">Merrilee</a></td><td>Merrilee description</td><td>Merrilee category</td>
<tr><td><a href="http://vistaprint.com" target="_blank" alt="none">Kalinda</a></td><td>Kalinda description</td><td>Kalinda category</td>
<tr><td><a href="https://hubpages.com" target="_blank" alt="none">Carny</a></td><td>Carny description</td><td>Carny category</td>
</table>
</div>
<script>
function sortTable() {
var table, rows, switching, i, x, y, shouldSwitch;
table = document.getElementById("AllTable");
switching = true;
/*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.rows;
/*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")[0];
y = rows[i + 1].getElementsByTagName("TD")[0];
//check if the two rows should switch place:
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;
}
}
}
</script>
</body>
</html>我想对一个 HTML 表格进行排序 - 我有以下脚本。问题是第一列是这样生成的，（bc 脚本指向 td 元素）它没有正确排序。
<td><a href="URL" target="_blank">VALUE_TO_SORT_BY</a></td>
在定义 var x 和 y 的地方，我尝试将 td 更改为 a，但没有奏效（据我所知，根本没有发生排序）
<script>
function sortTable() {
var table, rows, switching, i, x, y, shouldSwitch;
table = document.getElementById("myTable");
switching = true;
/*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.rows;
/*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:*/
//I think the issue is here, but unsure how to solve
x = rows[i].getElementsByTagName("TD")[0];
y = rows[i + 1].getElementsByTagName("TD")[0];
//check if the two rows should switch place:
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;
}
}
}
</script>
【问题讨论】：
-
您应该发布一个minimal reproducible example 来重现该问题。您可以使用 Stack Snippet（问题编辑器中的工具之一）来执行此操作。
-
您能否提供一个未正确排序的示例表？使用您的代码和我制作的快速表格进行尝试，它似乎可以正常工作。
-
rows[i + 1].getElementsByTagName("TD")[0]将为i === (rows.length - 1)抛出错误 -
我将 'TD' 更改为 'a'，您在其中设置了 'x' 和 'y' 的值，并且排序正常工作。你确定这不起作用吗？控制台有错误吗？
标签： javascript html sorting html-table