I have difficulty ordering a table by letters AND numbers
Question
I have found a very useful script on W3 schools to order tables by ascending or descending order, the problem is I can make it work for one or the other only.
I'm trying to sort "both" depending on what the values in the columns are.
<!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>
I can modify this:
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;
}
}
For this:
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;
}
}
To make it work with numbers, but I can't do both at the same time. I am not sure if I have to create a new table or if i can just indent it, but where?? I am really new to Java as I mainly code with python
Thank you for your help !
2 answers
solution1
0 ACCPTED 2020-01-02 23:12:36
You could replace your check with one making use of localeCompare and it's numeric option
Instead of:
if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
You could use:
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>
solution2
0 2020-01-02 23:13:27
Please check out localCompare, i think i meets up your requirements 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;
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Ordering a Multi-Dimensional Array with Letters and Numbers
How can I order a table with decimal numbers and letters
I have a difficulty with my javascript
I have difficulty in deriving children from a Promise
How to count words that only have letters and no numbers in a textarea using Jquery?
jQuery, ordering rows in a table using numbers in child elements
I have a list of request numbers(strings) displayed in table format in my app and it has pagination, so have multiple page table of contents
javascript validation for ordering of numbers
How can I generate a string of numbers and letters in Javascript?
How can I build a regex to exclude all, except letters and numbers?
Related Tags