Sort Table in HTML & Javascript - issue with first column

Question

I used this code to create a table I can sort: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_sort_table_desc

My issue is that column 2,3 and 4 will be sorted without problem but not the first one. Basically if I follow the example it is always the next column that got sorted and not the one I clicked on. So I adjusted the script using n-1 instead of n to filter the proper column but that prevents me from filtering the first one. I can't figure out where is this problem coming from.

<div>

    <table id="myTable">
            <colgroup>
           <col span="1" style="width: 45%;">
           <col span="1" style="width: 20%;">
           <col span="1" style="width: 20%;">
           <col span="1" style="width: 20%;">
            </colgroup>
      <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)">Scenario</th>
        <th onclick="sortTable(0)">Delta returns</th>
        <th onclick="sortTable(1)">Sensitivity</th>
        <th onclick="sortTable(2)">Delta volatility</th>
      </tr>
      <tr>
        <th>Scenario 1</th>
        <td>2</td>
        <td>3</td>
        <td>4</td>
      </tr>
      <tr>
        <th>Scenario 2</th>
        <td>7</td>
        <td>1</td>
        <td>5</td>
      </tr>
      <tr>
        <th>Scenario 3</th>
        <td>5</td>
        <td>1</td>
        <td>0</td>
      </tr>
      <tr>
        <th>Scenario 4</th>
        <td>0</td>
        <td>2</td>
        <td>7</td>
      </tr>

    </table>

</div>

The script.

<script>
function sortTable(n) {
  var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
  table = document.getElementById("myTable");
  switching = true;
  //Set the sorting direction to ascending:
  dir = "asc"; 
  /*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.getElementsByTagName("TR");
    /*Loop through all table rows (except the
    first, which contains table headers):*/
    for (i = 1; i < (rows.length - 1); 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")[n-1];
      y = rows[i + 1].getElementsByTagName("TD")[n-1];
      /*check if the two rows should switch place,
      based on the direction, asc or desc:*/
      if (dir == "asc") {
        if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
          //if so, mark as a switch and break the loop:
          shouldSwitch= true;
          break;
        }
      } else if (dir == "desc") {
        if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
          //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;
      //Each time a switch is done, increase this count by 1:
      switchcount ++;      
    } else {
      /*If no switching has been done AND the direction is "asc",
      set the direction to "desc" and run the while loop again.*/
      if (switchcount == 0 && dir == "asc") {
        dir = "desc";
        switching = true;
      }
    }
  }
}
</script>

and the related css:

table {
    border-collapse: collapse;
    border-spacing: 0;
    height:400px;
    border: 1px solid #ddd;
    overflow-y: scroll;
    overflow-x: scroll;
    display: block;
    font-family: helvetica;
    font-size:12px;
}

th, td {
    text-align: left;
    padding: 8px;
}

tr:nth-child(even){background-color: #002560;
    color:white;
}

th {
    cursor: pointer;
}

Julien Grégoire · Accepted Answer · 2018-01-03 19:11:25Z

2

You are using getElementsByTagName but your first cell of each row is a TH element. The TH is not taken into account so you can't filter on it and your index is off by 1, since, column 0 will be the first TD element (which is your second column). You can replace your TH with a TD and use normal index (n instead of n - 1).

Or you can use children instead of getElementsByTagName, which will return all children, no matter what their tag name is. Here as well, use normal indexing (0 for first column, 1 for second, etc).

https://developer.mozilla.org/en-US/docs/Web/API/ParentNode/children

Like this:

x = rows[i].children[n];
y = rows[i + 1].children[n];

answered Jan 3, 2018 at 19:11

Julien Grégoire

17.2k4 gold badges34 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Kit Masaracchia · Accepted Answer · 2018-01-03 18:43:23Z

0

Try starting i at 0 instead of 1.

answered Jan 3, 2018 at 18:43

Kit Masaracchia

1015 bronze badges

1 Comment

Rom M Over a year ago

It won't sort the column

Collectives™ on Stack Overflow

Sort Table in HTML & Javascript - issue with first column

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related