What's new
HTML Forums | An HTML and CSS Coding Community

Welcome to HTMLForums; home of web development discussion! Please sign in or register your free account to get involved. Once registered you will be able to connect with other members, send and receive private messages, reply to topics and create your very own. Our registration process is hassle-free and takes no time at all!

Sorting by a column

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


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>
 
Back
Top