So sortieren Sie HTML-Tabellen mit JavaScript: Eine umfassende Lösung

Sortieren von HTML-Tabellen mit JavaScript: Eine einfache Lösung erneut aufgegriffen

Eine geeignete Lösung zum Sortieren von Tabellen in JavaScript zu finden, kann eine Herausforderung sein. Möglicherweise müssen Sie Spalten alphabetisch sortieren, einschließlich Zahlen, ohne jedoch bestimmte Zeichen zu ignorieren oder Währungen zu berücksichtigen.

Glücklicherweise gibt es eine unkomplizierte und effektive JavaScript-Lösung, die dabei helfen kann:

Einfaches JavaScript (ES6):

• Unterstützt sowohl alphabetische als auch numerische Sortierung in aufsteigender und absteigender Reihenfolge
• Funktioniert in Chrome, Firefox, Safari und sogar IE11

Implementierungsdetails:

1. Fügen Sie einen Klickereignis-Listener zu jeder Tabellenkopfzelle (th) hinzu.
2. Alle Tabellenzeilen abrufen (außer der ersten). ) für die Tabelle.
3. Sortieren Sie die Zeilen basierend auf dem Wert der angeklickten Spalte.
4. Fügen Sie die sortierten Zeilen wieder in die Tabelle ein.

Codeausschnitt:

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

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

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>

Stil:

Fügen Sie das folgende CSS hinzu, um die Tabelle zu formatieren und die Kopfzellen anklickbar zu machen:

<code class="css">table, th, td {
    border: 1px solid black;
}
th {
    cursor: pointer;
}</code>

Verwendung:

Fügen Sie JavaScript und CSS in Ihr HTML-Dokument ein und fügen Sie eine Tabelle mit Kopfzellen und Datenzeilen hinzu.

Beispiel:

<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><i>25</i></td></tr>
    <tr><td><a href="#">spain</a></td><td><i>2005-05-05</i></td><td></td></tr>
    <tr><td><b>Lebanon</b></td><td><a href="#">2002-02-02</a></td><td><b>-17</b></td></tr>
    <tr><td><i>Argentina</i></td><td>2005-04-04</td><td><a href="#">100</a></td></tr>
    <tr><td>USA</td><td></td><td>-6</td></tr>
</table></code>

Fazit:

Mit dieser einfachen und effizienten JavaScript-Lösung können Sie HTML-Tabellen ganz einfach mit einem Klick auf eine Spaltenüberschrift sortieren, unabhängig von den Daten Typ.

Das obige ist der detaillierte Inhalt vonSo sortieren Sie HTML-Tabellen mit JavaScript: Eine umfassende Lösung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!