I'm having problems creating a Dynamic Table?

Question

For a research project I have to create a dynamic table using JavaScript. I asked some friends for help but since nigher them nor I is a computer scientist (or anything in that direction), I only know that it's good to use AJAX and DOM. And using the following javascipt (src=w3schools and stack)

the problem it is sorting but it is not alphabetical or numerical. It might be the url from the picture included in one column of the table but to me it looks random.

how do I create a dynamic working sorting table??

<table id="phones">
    <thead>
        <th><h2>Brand<br><p>Click to sort</p>
          <p><button onclick="sortTable()"></button></p></h2></th>
        <th><h2>IMG</h2></th>
        <th><h2>Model<br><p>Click to sort</p>
          <p><button onclick="sortTable()"></button></p></h2></th>
        <th><h2>Os<br><p>Click to sort</p>
          <p><button onclick="sortTable()"></button></p></h2></th>
        <th><h2>Screensize<br><p>Click to sort</p>
          <p><button onclick="sortTable()"></button></p></h2></th>
        <th><h2>Price<br><p>Click to sort</p>
          <p><button onclick="sortTable()"></button></p></h2></th> 
    </thead>  ``` 

function sortTable() {
  var table, rows, switching, i, x, y, shouldSwitch;
  table = document.getElementById('phones');
  switching = true;

  while (switching) { 
    switching = false;
    rows = table.rows;
    for (i = 1; i < (rows.length - 1); i++) {
      shouldSwitch = false;
      x = rows[i].getElementsByTagName("td")[0];
      y = rows[i + 1].getElementsByTagName("td")[0];
      if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
        shouldSwitch = true;
        break;
       }
    }
    if (shouldSwitch) {      
      rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
      switching = true;
          }
  }
}

Answer 1

getElementsByTagName("TD")[0] means access the first TD element, but you don't always want the first. Instead, you'll want to add a colNum parameter that can be used to put a different number in those square brackets that you define when you call the function. You'll also want to treat number sorting differently than alphabetical sorting. When you treat numbers as strings, they sort differently, as shown here:

console.log( ["19", "20", "3", "35", "1", "25", "300"].sort() );

So add a second parameter where you tell the function whether it should use an alphabetical sort or numerical sort. Then, in the function, detect the parameter and sort accordingly, like so:

function sortTable(colNum, sortType) {
  var table, rows, switching, i, x, y, shouldSwitch;
  table = document.getElementById("phones");
  switching = true;

  while (switching) {
    switching = false;
    rows = table.rows;
    for (i = 1; i < (rows.length - 1); i++) {
      shouldSwitch = false;
      x = rows[i].getElementsByTagName("TD")[colNum];
      y = rows[i + 1].getElementsByTagName("TD")[colNum];
      if (sortType == "alphabetical") {
        if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
          shouldSwitch = true;
          break;
        }
      } else {
        if (Number(x.innerHTML) > Number(y.innerHTML)) {
          shouldSwitch = true;
          break;
        }
      }
    }
    if (shouldSwitch) {
      rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
      switching = true;
    }
  }
}

<table id="phones">
  <tr>
    <th><button onclick="sortTable(0, 'alphabetical');">Sort this column</button></th>
    <th><button onclick="sortTable(1, 'alphabetical');">Sort this column</button></th>
    <th><button onclick="sortTable(2, 'numerical');">Sort this column</button></th>
  </tr>
  <tr>
    <td>C</td>
    <td>A</td>
    <td>100</td>
  </tr>
  <tr>
    <td>D</td>
    <td>Z</td>
    <td>1</td>
  </tr>
  <tr>
    <td>E</td>
    <td>D</td>
    <td>19</td>
  </tr>
  <tr>
    <td>A</td>
    <td>C</td>
    <td>55</td>
  </tr>
</table>