Wie sortiere ich HTML-Tabellen alphabetisch mit JavaScript?

HTML-Tabellen mit JavaScript sortieren

Viele Entwickler suchen JavaScript-Lösungen zum Sortieren von Tabellen. Eine einfache und effektive Lösung besteht darin, jede Spalte alphabetisch zu sortieren. Diese Lösung entspricht der Notwendigkeit, Code, Zahlen oder Währung außer Acht zu lassen und sich auf den Text zu konzentrieren.

Lösungsübersicht

Diese Lösung beinhaltet das Hinzufügen eines Klickereignisses zu jeder Headerzelle . Für die jeweilige Tabelle werden alle Zeilen (außer der ersten) gesucht und nach dem Wert der angeklickten Spalte sortiert. Nach dem Sortieren werden die Zeilen in der neuen Reihenfolge wieder in die Tabelle eingefügt.

Implementierungsdetails

1. Ereignisbehandlung: Hinzufügen ein Klickereignis für alle Zellen.
2. Zeilenabruf: Extrahieren Sie alle Zeilen außer der ersten (tr:nth-child(n 2)) aus der angeklickten Tabelle.
3. Sortierlogik: Erstellen Sie einen Sortierfunktionsvergleicher, der zwei Argumente akzeptiert: den Spaltenindex idx und ein asc-Flag. Diese Funktion sortiert Zeilen basierend auf dem Textinhalt der angeklickten Spalte.
4. Tabellenaktualisierungen: Nachdem Sie die Zeilen sortiert haben, fügen Sie sie in der neuen Reihenfolge wieder in die Tabelle ein.

Codebeispiel in JavaScript und HTML

<code class="javascript">const getCellValue = (tr, idx) => tr.children[idx].innerText || tr.children[idx].textContent;

const comparer = (idx, asc) => (a, b) => ((v1, v2) =>
    v1 !== '' && v2 !== '' && !isNaN(v1) && !isNaN(v2) ? v1 - v2 : v1.toString().localeCompare(v2)
    )(getCellValue(asc ? a : b, idx), getCellValue(asc ? b : a, idx));

// Event Handling
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) );
})));</code>

<code class="html"><table>
    <tr>
<th>Country</th>
<th>Date</th>
<th>Size</th>
</tr>
    <tr>
<td>France</td>
<td>2001-01-01</td>
<td>25</td>
</tr>
    <tr>
<td>spain</td>
<td>2005-05-05</td>
<td></td>
</tr>
    <tr>
<td>Lebanon</td>
<td>2002-02-02</td>
<td>-17</td>
</tr>
    <tr>
<td>Argentina</td>
<td>2005-04-04</td>
<td>100</td>
</tr>
    <tr>
<td>USA</td>
<td></td>
<td>-6</td>
</tr>
</table></code>

Diese Lösung sortiert HTML-Tabellen effizient alphabetisch mit einem einzigen Klick auf die Spaltenüberschrift, ohne externe Abhängigkeiten. Seine Einfachheit und Kompatibilität mit den wichtigsten Browsern machen es zu einer geeigneten Option für viele Sortieranforderungen.

Das obige ist der detaillierte Inhalt vonWie sortiere ich HTML-Tabellen alphabetisch mit JavaScript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!