HTML-Tabelle mit JavaScript sortieren

Wir stoßen oft auf Situationen, in denen wir unsere Tabellen interaktiv gestalten möchten. Vielleicht möchten wir sie einfach durch einen Klick auf die Spalte oder eine andere Methode sortieren. HTML hat keine Programmiermöglichkeiten, daher müssen wir JavaScript verwenden, um eine HTML-Tabelle zu sortieren. Leider gibt es keine eingebaute Methode, die uns hilft, das Array zu sortieren. Aus diesem Grund schreiben wir unsere benutzerdefinierte Methode, die DOM-Manipulationsfähigkeiten und Vergleichsfunktionen nutzt. In diesem Tutorial erfahren Sie, wie Sie HTML-Tabellen mit JavaScript sortieren.

HTML-Tabellen mit JavaScript sortieren

Die benutzerdefinierte Methode verwendet die folgenden beiden Hilfsfunktionen, um das Array zu sortieren.

• getCellValue()

Eine Funktion zum Abrufen des Inhalts aus einer Zelle mit dem Tabellenzeilen- und Spaltenindex.

Wir verwenden die children-Eigenschaft der Tabellenzeile, um die ith-Spalte mit tr.children[i] auszuwählen und verwenden dann ihre innerText- oder textContent-Eigenschaft, um den eigentlichen Inhalt zu erhalten. Sobald wir den tatsächlichen Inhalt einer Zelle erhalten haben, können wir einen benutzerdefinierten Vergleich verwenden, um diese Werte zu vergleichen und zu sortieren.

• comparer()

Eine Funktion zum Vergleichen der Werte zweier Elemente in einer bestimmten Tabelle.

Wir erhalten zunächst den Inhalt der Zellen mit der Funktion getCellValue() mit einem angegebenen Zeilen- und Spaltenindex. Wir prüfen dann, ob beide entweder gültige Ganzzahlen oder Strings sind und vergleichen sie dann, um die richtige Reihenfolge zu finden.

Algorithmus

Code

const getCellValue = (tableRow, columnIndex) =>
    tableRow.children[columnIndex].innerText ||
    tableRow.children[columnIndex].textContent;

const comparer = (idx, asc) => (r1, r2) =>
    ((el1, el2) => el1 !== '' && el2 !== '' && !isNaN(el1) && !isNaN(el2) ?
         el1 - el2 :
         el1.toString().localeCompare(el2))(
        getCellValue(asc ? r1 : r2, idx), getCellValue(asc ? r2 : r1, idx));

// do the work...
document.querySelectorAll('th').forEach(
    th => th.addEventListener(
        'click', (() => {
          const table = th.closest('table');
          Array.from(table.querySelectorAll('tr:nth-child(n+2)'))
              .sort(comparer(
                  Array.from(th.parentNode.children).indexOf(th),
                  this.asc = !this.asc))
              .forEach(tr => table.appendChild(tr));
        })));

Alle gängigen Browser unterstützen alle oben besprochenen Methoden.