Sort HTML table using Javascript?

Question

How can I sort the following table using Javascript? How can I do a function that chooses the column to be ordered ascending or descending?

<table border="1">
        <tr><td>a</td><td>s</td></tr>
        <tr><td>d</td><td>r</td></tr>
        <tr><td>c</td><td>t</td></tr>
        <tr><td>f</td><td>q</td></tr>
        <tr><td>b</td><td>k</td></tr>
        <tr><td>e</td><td>o</td></tr>
        <tr><td>l</td><td>p</td></tr>
        <tr><td>k</td><td>d</td></tr>
        <tr><td>j</td><td>c</td></tr>
        <tr><td>i</td><td>z</td></tr>
        <tr><td>h</td><td>b</td></tr>
        <tr><td>q</td><td>l</td></tr>
        <tr><td>p</td><td>m</td></tr>
        <tr><td>o</td><td>n</td></tr>
        <tr><td>n</td><td>a</td></tr>
        <tr><td>g</td><td>f</td></tr>
        <tr><td>x</td><td>g</td></tr>
        <tr><td>m</td><td>e</td></tr>
        <tr><td>u</td><td>j</td></tr>
        <tr><td>t</td><td>i</td></tr>
        <tr><td>w</td><td>y</td></tr>
        <tr><td>s</td><td>h</td></tr>
        <tr><td>v</td><td>u</td></tr>
        <tr><td>r</td><td>v</td></tr>
        <tr><td>y</td><td>w</td></tr>
        <tr><td>z</td><td>x</td></tr>
    </table>

I’ve already tried this: I’m using jQuery 3.4.1 in case of questions

sort_table(document.getElementsByTagName('table'), 'asc', 0)

function sort_table(table:any, order:string, column:number) {
    var tbody = $(table.target).find('tbody')
    tbody.find('tr').sort(function(a, b) {
      if (order !== 'asc') {
          return $('td:'+column+'', a).text().localeCompare($('td:'+column+'', b).text());
      } else {
          return $('td:'+column+'', b).text().localeCompare($('td:'+column+'', a).text());
      }
    }).appendTo(tbody)
  }

Can anyone help sort this table?

Answer 1

Try the following:

function sortTable(table, dir, n) {
  var rows, switching, i, x, y, shouldSwitch, switchcount = 0;
  switching = true;
  /*Faça um loop que continuará até
   nenhuma troca foi feita:*/
  while (switching) {
    //comece dizendo: nenhuma troca é feita:
    switching = false;
    rows = table.rows;
    /*Faça um loop por todas as linhas da tabela (exceto o
     primeiro, que contém cabeçalhos da tabela):*/
    for (i = 1; i < (rows.length - 1); i++) {
      //comece dizendo que não deve haver alternância:
      shouldSwitch = false;
      /*Obtenha os dois elementos que você deseja comparar,
       um da linha atual e o outro da próxima:*/
      x = rows[i].getElementsByTagName("TD")[n];
      y = rows[i + 1].getElementsByTagName("TD")[n];
      /*verifique se as duas linhas devem mudar de lugar,
       com base na direção, asc ou desc:*/
      if (dir == "asc") {
        if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
          //Nesse caso, marque como uma opção e interrompa o loop:
          shouldSwitch = true;
          break;
        }
      } else if (dir == "desc") {
        if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
          //Nesse caso, marque como uma opção e interrompa o loop:
          shouldSwitch = true;
          break;
        }
      }
    }
    if (shouldSwitch) {
      /*Se um interruptor foi marcado, faça-o
       e marque que uma troca foi feita:*/
      rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
      switching = true;
      //Cada vez que uma troca for concluída, aumente essa contagem em 1:
      switchcount++;
    } else {
      /*Se nenhuma mudança foi feita E a direção for "asc",
       defina a direção para "desc" e execute o loop while novamente.*/
      if (switchcount == 0 && dir == "asc") {
        dir = "desc";
        switching = true;
      }
    }
  }
}

var myTable = document.getElementById('myTable');
sortTable(myTable, 'asc', 0);

//Button click:
let ord = false;
document.getElementById("button1").onclick = function() {
  if (!ord) {
    sortTable(myTable, 'asc', 0);
    //sortTable(myTable, 'asc', 1);
    ord = true;
  } else {
    sortTable(myTable, 'desc', 0);
    //sortTable(myTable, 'desc', 1);
    ord = false;
  }
}

<p>Clique sobre algum header tabela: COL1 ou COL2 para ordernar:</p>

<button id="button1">Ordernar Tabela</button>

<table border="1" id="myTable">

  <tr>
    <th onclick="sortTable(document.getElementById('myTable'),'asc',0)">COL1</th>
    <th onclick="sortTable(document.getElementById('myTable'),'desc',1)">COl2</th>
  </tr>

  <tr>
    <td>a</td>
    <td>s</td>
  </tr>
  <tr>
    <td>d</td>
    <td>r</td>
  </tr>
  <tr>
    <td>c</td>
    <td>t</td>
  </tr>
  <tr>
    <td>f</td>
    <td>q</td>
  </tr>
  <tr>
    <td>b</td>
    <td>k</td>
  </tr>
  <tr>
    <td>e</td>
    <td>o</td>
  </tr>
  <tr>
    <td>l</td>
    <td>p</td>
  </tr>
  <tr>
    <td>k</td>
    <td>d</td>
  </tr>
  <tr>
    <td>j</td>
    <td>c</td>
  </tr>
  <tr>
    <td>i</td>
    <td>z</td>
  </tr>
  <tr>
    <td>h</td>
    <td>b</td>
  </tr>
  <tr>
    <td>q</td>
    <td>l</td>
  </tr>
  <tr>
    <td>p</td>
    <td>m</td>
  </tr>
  <tr>
    <td>o</td>
    <td>n</td>
  </tr>
  <tr>
    <td>n</td>
    <td>a</td>
  </tr>
  <tr>
    <td>g</td>
    <td>f</td>
  </tr>
  <tr>
    <td>x</td>
    <td>g</td>
  </tr>
  <tr>
    <td>m</td>
    <td>e</td>
  </tr>
  <tr>
    <td>u</td>
    <td>j</td>
  </tr>
  <tr>
    <td>t</td>
    <td>i</td>
  </tr>
  <tr>
    <td>w</td>
    <td>y</td>
  </tr>
  <tr>
    <td>s</td>
    <td>h</td>
  </tr>
  <tr>
    <td>v</td>
    <td>u</td>
  </tr>
  <tr>
    <td>r</td>
    <td>v</td>
  </tr>
  <tr>
    <td>y</td>
    <td>w</td>
  </tr>
  <tr>
    <td>z</td>
    <td>x</td>
  </tr>
</table>