[英]I have difficulty ordering a table by letters AND numbers
我在 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;
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.