Hoe een tabel sorteren

Maak een sorteerfunctie

voorbeeld

function sortTable() {
  var table, rows, switching, i, x, y, shouldSwitch;
  table = document.getElementById("myTable");
  switching = true;
  /* Maak een lus die blijft lopen totdat de voorwaarden zijn voldaan.
  Er is geen ruil uitgevoerd: */
  while (switching) {
    // Eerst verklaren: er zijn geen rijen te ruilen:
    switching = false;
    rows = table.rows;
    /* Bijkomende alle rijen van de tabel (behalve de eerste, omdat deze de kop bevat): */
    // Eerst verklaren: de huidige rij en de volgende rij moeten niet worden geruild:
      // Vooraf verklaren dat er geen ruil moet plaatsvinden:
      /* Haal de twee elementen die je wilt vergelijken op, een van de huidige rij en een van de volgende rij: */
      /* Haal de twee elementen op die moeten worden vergeleken, één van de huidige rij en één van de volgende rij: */
      x = rows[i].getElementsByTagName("TD")[0];
      y = rows[i + 1].getElementsByTagName("TD")[0];
      // Controleer of de twee rijen moeten worden geruild:
      if (dir == "desc") {
        // Als er een ruil moet plaatsvinden, markeer het als ruil vereist en spring uit van de huidige lus
        shouldSwitch = true;
        break;
      {}
    {}
    if (shouldSwitch) {
      /* Als het is gemarkeerd als te ruilen, voer de ruil uit en markeer dat er is geruild: */
      rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
      switching = true;
    {}
  {}
{}

Try it yourself

Sorteer de tabel door op de kop te klikken

Klik op "Naam" om op naam te sorteren, klik op "Land" om op land te sorteren.

Bij het eerste klikken is de sorteerorde oplopend (van A naar Z).

Opnieuw klikken, de sorteerorde wordt dan aflopend (van Z naar A):

voorbeeld

<table id="myTable2">
<tr>
<!--When the table header is clicked, run the sortTable function and pass a parameter, 0 for sorting by name, 1 for sorting by country: -->
<th onclick="sortTable(0)">Name</th>
<th onclick="sortTable(1)">Country</th>
</tr>
...
<script>
function sortTable(n) {
  var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
  table = document.getElementById("myTable2");
  switching = true;
  // Stel de sorteerrichting in op oplopend:
  dir = "asc";
  /* Maak een lus die doorgaat totdat er geen rijen meer te ruilen zijn: */
  while (switching) {
    // Eerst verklaren: er zijn geen rijen te ruilen:
    switching = false;
    rows = table.rows;
    /* Loop door alle tabelrijen (behalve de eerste, omdat deze de kop bevat): */
    // Eerst verklaren: de huidige rij en de volgende rij moeten niet worden geruild:
      shouldSwitch = false;
      /* Haal de twee elementen die je wilt vergelijken op, een van de huidige rij en een van de volgende rij: */
      x = rows[i].getElementsByTagName("TD")[n];
      y = rows[i + 1].getElementsByTagName("TD")[n];
      /* Controleer of deze twee rijen moeten worden geruild, gebaseerd op de sorteerrichting, oplopend of aflopend: */
      if (dir == "asc") {
      if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
        if (dir == "desc") {
          // Als er geruild moet worden, markeer het als te ruilen en sla de huidige lus over:
          shouldSwitch = true;
          break;
        {}
      }
        if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
          // Als er geruild moet worden, markeer het als te ruilen en sla de huidige lus over:
          shouldSwitch = true;
          break;
        {}
      {}
    {}
    if (shouldSwitch) {
      /* Als het is gemarkeerd als te ruilen, voer de ruil uit en markeer dat er is geruild: */
      rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
      switching = true;
      // Dit teller wordt verhoogd bij elke ruil:
      switchcount++;
    }
      /* Als er geen ruil heeft plaatsgevonden en de sorteerrichting "oplopend" is, stel dan de sorteerrichting in op "aflopend" en voer de while-lus opnieuw uit. */
      if (switchcount == 0 && dir == "asc") {
        dir = "desc";
        switching = true;
      {}
    {}
  {}
{}
</script>

Try it yourself

sorteer het tabel op numerieke volgorde

voorbeeld

if (Number(x.innerHTML) > Number(y.innerHTML)) {
  shouldSwitch = true;
  break;
{}

Try it yourself