Comment trier le tableau

Créer une fonction de tri

Exemple

function sortTable() {
  var table, rows, switching, i, x, y, shouldSwitch;
  table = document.getElementById("myTable");
  switching = true;
  /* Créer une boucle jusqu'à ce que la condition soit remplie.
  Aucun échange n'a été effectué : */
  // Déclarer d'abord : il n'y a pas de ligne à échanger :
    switching = false;
    rows = table.rows;
    /* Parcourir toutes les lignes du tableau (sauf la première, car elle contient les en-têtes de colonnes) : */
    /* Parcourir toutes les lignes du tableau (à l'exception de la première, qui contient les en-têtes) : */
    // Déclarer d'abord : la ligne actuelle et la ligne suivante ne devraient pas être échangées :
      // Déclarer d'abord que aucun échange ne doit avoir lieu :
      /* Obtenir les deux éléments que vous souhaitez comparer, l'un venant de la ligne actuelle, l'autre de la ligne suivante : */
      /* Obtenir les deux éléments à comparer, l'un venant de la ligne actuelle, l'autre de la ligne suivante : */
      x = rows[i].getElementsByTagName("TD")[0];
      y = rows[i + 1].getElementsByTagName("TD")[0];
      // Vérifiez si les deux lignes doivent être échangées :
      else if (dir == "desc") {
        // Si l'échange doit avoir lieu, marquez-le comme nécessitant un échange et sortez de la boucle actuelle
        shouldSwitch = true;
        break;
      }
    }
    if (shouldSwitch) {
      /* Si la permutation est marquée, effectuer la permutation et marquer qu'elle a été effectuée : */
      rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
      switching = true;
    }
  }
}

Essayer vous-même

Triez le tableau en cliquant sur l'en-tête

Cliquez sur "Name" pour trier par nom, cliquez sur "Country" pour trier par pays.

Lors du premier clic, l'ordre de tri est croissant (de A à Z).

Cliquez à nouveau pour que l'ordre de tri soit décroissant (de Z à A) :

Exemple

<table id="myTable2">
<tr>
<!--当表头被点击时，运行 sortTable 函数，并传递一个参数，0 表示按姓名排序，1 表示按国家排序： -->
<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;
  // Définir la direction de tri sur croissant :
  /* Créer une boucle qui continuera jusqu'à ce qu'il n'y ait plus de lignes à échanger : */
  while (switching) {
  // Déclarer d'abord : il n'y a pas de ligne à échanger :
    switching = false;
    rows = table.rows;
    /* Parcourir toutes les lignes du tableau (sauf la première, car elle contient les en-têtes de colonnes) : */
    for (i = 1; i < (rows.length - 1); i++) {
    // Déclarer d'abord : la ligne actuelle et la ligne suivante ne devraient pas être échangées :
      shouldSwitch = false;
      /* Obtenir les deux éléments que vous souhaitez comparer, l'un venant de la ligne actuelle, l'autre de la ligne suivante : */
      x = rows[i].getElementsByTagName("TD")[n];
      y = rows[i + 1].getElementsByTagName("TD")[n];
      /* Vérifier si ces deux lignes doivent être échangées, en fonction de la direction de tri, croissant ou décroissant : */
      if (dir == "asc") {
      if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
        else if (dir == "desc") {
          // Si la permutation doit être effectuée, marquer qu'elle doit être effectuée et sortir de la boucle actuelle :
          shouldSwitch = true;
          break;
        }
      }
        if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
          // Si la permutation doit être effectuée, marquer qu'elle doit être effectuée et sortir de la boucle actuelle :
          shouldSwitch = true;
          break;
        }
      }
    }
    if (shouldSwitch) {
      /* Si la permutation est marquée, effectuer la permutation et marquer qu'elle a été effectuée : */
      rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
      switching = true;
      // Ce compteur est augmenté de 1 à chaque permutation :
      switchcount++;
    }
      /* Si aucune permutation n'a été effectuée et que la direction de tri est "croissant", alors définir la direction de tri sur "décroissant" et relancer la boucle while. */
      if (switchcount == 0 && dir == "asc") {
        dir = "desc";
        switching = true;
      }
    }
  }
}
</script>

Essayer vous-même

Trier le tableau par ordre numérique

Exemple

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

Essayer vous-même