bumblebee123
New member
I am trying to sort a user entered table in HTML. It sorts fine on default values.
However, it doesn't sort if I change values in the input table while testing. I tried different permutations of parseFloat and innerHTML but none of it worked. I am sure I am missing something basic but I have been at it for a few hours and I am getting really frustrated. Can someone point me in the right direction?
Thanks!!
This is my code
However, it doesn't sort if I change values in the input table while testing. I tried different permutations of parseFloat and innerHTML but none of it worked. I am sure I am missing something basic but I have been at it for a few hours and I am getting really frustrated. Can someone point me in the right direction?
Thanks!!
This is my code
Code:
<!DOCTYPE html>
<html>
<head>
<title>Sort a HTML Table Alphabetically</title>
<style>
table {
border-spacing: 0;
width: 100%;
border: 1px solid #ddd;
}
th, td {
text-align: left;
padding: 16px;
}
tr:nth-child(even) {
background-color: #f2f2f2
}
</style>
</head>
<body>
<p>Click the button to sort the table alphabetically, by name:</p>
<p><button onclick="sortTable()">Sort</button></p>
<table id="myTable">
<tr>
<th>Name</th>
<th>Country</th>
</tr>
<tr>
<td>A</td>
<td><input type="number" value=3></td> </tr>
<tr>
<td>B</td>
<td><input type="number" value=5></td> </tr>
<tr>
<td>C</td>
<td><input type="number" value=4></td> </tr>
<tr>
<td>Test if code is reading</td>
<td colspan="2" bgcolor="#ADD8E6"><div id="Years"></td>
</table>
<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 - 2); i++) {
/*for (i = 1; i < 2; 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")[1]).innerHTML);
y = ((rows[i + 1].getElementsByTagName("TD")[1]).innerHTML);
//check if the two rows should switch place:
/*document.getElementById("x").innerHTML = x.toLocaleString('en');*/
if (x < y) {
//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>