Wie man eine Tabelle sortiert

Erstellen Sie eine Sortierfunktion

Beispiel

function sortTable() {
  var table, rows, switching, i, x, y, shouldSwitch;
  table = document.getElementById("myTable");
  switching = true;
  /* Erstellen Sie einen Zyklus, bis die Bedingungen erfüllt sind.
  Kein Tausch wurde durchgeführt: */
  while (switching) {
    // Zunächst erklären: Es gibt keine Zeilen zum Tauschen:
    switching = false;
    rows = table.rows;
    /* Durchsuchen Sie alle Tabellenzeilen (außer der ersten, da sie die Kopfzeile enthält): */
    for (i = 1; i < (rows.length - 1); i++) {
      // Zunächst wird erklärt, dass kein Tausch durchgeführt werden sollte:
      shouldSwitch = false;
      /* Erhalten Sie die beiden Elemente, die verglichen werden sollen, eines aus der aktuellen Zeile und eines aus der nächsten Zeile: */
      x = rows[i].getElementsByTagName("TD")[0];
      y = rows[i + 1].getElementsByTagName("TD")[0];
      // Überprüfen Sie, ob die beiden Zeilen ausgetauscht werden sollten:
      if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
        // Wenn ein Tausch erforderlich ist, markieren Sie ihn als zu tauschen und beenden Sie den aktuellen Zyklus
        shouldSwitch = true;
        break;
      }
    }
    if (shouldSwitch) {
      /* Wenn ein Tausch erforderlich ist, führen Sie den Tausch durch und markieren Sie ihn als durchgeführt: */
      rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
      switching = true;
    }
  }
}

Probieren Sie es selbst aus

Sortieren Sie die Tabelle durch Klicken auf die Tabellenkopf

Klicken Sie auf "Name", um nach Name zu sortieren, klicken Sie auf "Land", um nach Land zu sortieren.

Bei der ersten Klick wird die Sortierreihenfolge aufsteigend (von A bis Z) sein.

Wird noch einmal geklickt, die Sortierreihenfolge wird absteigend (von Z bis A) sein:

Beispiel

<table id="myTable2">
<tr>
<!--Wenn der Tabellenkopf geklickt wird, führt die Funktion sortTable aus und übergibt einen Parameter, 0 bedeutet Sortierung nach Name, 1 bedeutet Sortierung nach Land: -->
<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;
  // Setzen Sie die Sortierreihenfolge auf aufsteigend:
  dir = "asc";
  /* Erstellen Sie einen Zyklus, der bis zum Ende fortgesetzt wird, bis keine Zeilen zum Tauschen vorhanden sind: */
  while (switching) {
    // Zunächst erklären: Es gibt keine Zeilen zum Tauschen:
    switching = false;
    rows = table.rows;
    /* Durchsuchen Sie alle Tabellenzeilen (außer der ersten, da sie die Kopfzeile enthält): */
    for (i = 1; i < (rows.length - 1); i++) {
      // Zunächst erklären: Die aktuelle Zeile und die nächste Zeile sollten nicht ausgetauscht werden:
      shouldSwitch = false;
      /* Erhalten Sie die beiden Elemente, die Sie vergleichen möchten, eines von der aktuellen Zeile und eines von der nächsten Zeile: */
      x = rows[i].getElementsByTagName("TD")[n];
      y = rows[i + 1].getElementsByTagName("TD")[n];
      /* Überprüfen Sie, ob diese beiden Zeilen ausgetauscht werden sollten, basierend auf der Sortierreihenfolge, aufsteigend oder absteigend: */
      if (dir == "asc") {
        if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
          // Wenn ein Tausch erforderlich ist, markieren Sie ihn als erforderlich und brechen Sie den aktuellen Zyklus ab:
          shouldSwitch = true;
          break;
        }
      } else if (dir == "desc") {
        if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
          // Wenn ein Tausch erforderlich ist, markieren Sie ihn als erforderlich und brechen Sie den aktuellen Zyklus ab:
          shouldSwitch = true;
          break;
        }
      }
    }
    if (shouldSwitch) {
      /* Wenn ein Tausch erforderlich ist, führen Sie den Tausch durch und markieren Sie ihn als durchgeführt: */
      rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
      switching = true;
      // Dieser Zähler wird jedes Mal erhöht, wenn eine Umsortierung durchgeführt wird:
      switchcount++;
    } else {
      /* Wenn keine Umsortierung vorgenommen wurde und die Sortierreihenfolge "aufsteigend" ist, dann setzen Sie die Sortierreihenfolge auf "absteigend" und führen Sie den while-Zyklus erneut aus. */
      if (switchcount == 0 && dir == "asc") {
        dir = "desc";
        switching = true;
      }
    }
  }
}
</script>

Probieren Sie es selbst aus

Sortieren Sie den Tisch numerisch

Beispiel

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

Probieren Sie es selbst aus