我在 W3 学校上找到了一个非常有用的脚本，可以按升序或降序对表进行排序，问题是我只能让它适用于一个或另一个。
我正在尝试根据列中的值对"两者"进行排序。
<!DOCTYPE html>
<html>
<head>
<title>Sort a HTML Table Alphabetically</title>
<style>
table {
border-spacing: 0;
width: 100%;
border: 1px solid #ddd;
}
th {
cursor: pointer;
}
h1{
color: green;
}
th, td {
text-align: left;
padding: 16px;
}
tr:nth-child(even) {
background-color: #f2f2f2
}
</style>
</head>
<body>
<h1>WORKS WITH LETTERS</h1>
<h1>WORKS WITH LETTERS</h1>
<h1>WORKS WITH LETTERS</h1>
<table id="myTable">
<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)">Name</th>
<th onclick="sortTable(1)">Value</th>
</tr>
<tr>
<td>Berglunds snabbkop</td>
<td>46</td>
</tr>
<tr>
<td>North/South</td>
<td>34</td>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>32</td>
</tr>
<tr>
<td>Koniglich Essen</td>
<td>432</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>5</td>
</tr>
<tr>
<td>Paris specialites</td>
<td>463</td>
</tr>
<tr>
<td>Island Trading</td>
<td>1</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>64</td>
</tr>
</table>
<script>
function sortTable(n) {
var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
table = document.getElementById("myTable");
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;
switchcount ++;
} else {
if (switchcount == 0 && dir == "asc") {
dir = "desc";
switching = true;
}
}
}
}
</script>
</body>
</html>
我可以修改这个：
if (dir == "asc") {
if (Number(x.innerHTML) > Number(y.innerHTML)) {
shouldSwitch = true;
break;
}
} else if (dir == "desc") {
if (Number(x.innerHTML) < Number(y.innerHTML)) {
shouldSwitch = true;
break;
}
}
为此：
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;
}
}
让它与数字一起工作，但我不能同时做这两件事。 我不确定我是否必须创建一个新表，或者我是否可以缩进它，但是在哪里？？ 我真的很陌生Java，因为我主要使用python编码
感谢您的帮助！
你可以用一张使用localeCompare的支票代替你的支票，这是numeric的选择
而不是：
if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
您可以使用：
x = x.innerText.toLowerCase();
y = y.innerText.toLowerCase();
if (x.localeCompare(y, 'en', {numeric: true}) > 0) {
function sortTable(n) {
var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
table = document.getElementById("myTable");
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") {
x = x.innerText.toLowerCase();
y = y.innerText.toLowerCase();
if (x.localeCompare(y, 'en', {numeric: true}) > 0) {
shouldSwitch = true;
break;
}
} else if (dir == "desc") {
x = x.innerText.toLowerCase();
y = y.innerText.toLowerCase();
if (x.localeCompare(y, 'en', {numeric: true}) < 0) {
shouldSwitch = true;
break;
}
}
}
if (shouldSwitch) {
rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
switching = true;
switchcount++;
} else {
if (switchcount == 0 && dir == "asc") {
dir = "desc";
switching = true;
}
}
}
}table {
border-spacing: 0;
width: 100%;
border: 1px solid #ddd;
}
th {
cursor: pointer;
}
h1 {
color: green;
}
th,
td {
text-align: left;
padding: 16px;
}
tr:nth-child(even) {
background-color: #f2f2f2
}<body>
<h1>WORKS WITH LETTERS</h1>
<h1>WORKS WITH LETTERS</h1>
<h1>WORKS WITH LETTERS</h1>
<table id="myTable">
<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)">Name</th>
<th onclick="sortTable(1)">Value</th>
</tr>
<tr>
<td>Berglunds snabbkop</td>
<td>46</td>
</tr>
<tr>
<td>North/South</td>
<td>34</td>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>32</td>
</tr>
<tr>
<td>Koniglich Essen</td>
<td>432</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>5</td>
</tr>
<tr>
<td>Paris specialites</td>
<td>463</td>
</tr>
<tr>
<td>Island Trading</td>
<td>1</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>64</td>
</tr>
</table>
</body>请查看 localCompare，我想我符合您的要求 String.localeCompare On MDN
if (dir == "asc") {
if ( ( x.innerHTML.toLowerCase().localeCompare( y.innerHTML.toLowerCase() ) ) > 0 ) {
shouldSwitch = true;
break;
}
} else if (dir == "desc") {
if ( ( x.innerHTML.toLowerCase().localeCompare( y.innerHTML.toLowerCase() ) ) < 0 ) {
shouldSwitch = true;
break;
}
}