Comment trier les tableaux HTML par ordre alphabétique avec JavaScript ?

Tri des tableaux HTML avec JavaScript

De nombreux développeurs recherchent des solutions JavaScript pour trier les tableaux. Une solution simple et efficace consiste à trier chaque colonne par ordre alphabétique. Cette solution répond à la nécessité d'ignorer le code, les chiffres ou la devise et de se concentrer sur le texte.

Présentation de la solution

Cette solution consiste à ajouter un événement de clic à chaque cellule d'en-tête. . Pour la table respective, il localise toutes les lignes (sauf la première) et les trie en fonction de la valeur de la colonne cliquée. Une fois triés, il réinsère les lignes dans le tableau dans le nouvel ordre.

Détails de mise en œuvre

1. Gestion des événements : Ajouter un événement de clic sur toutes les cellules.
2. Récupération de lignes : Extrayez toutes les lignes sauf la première (tr:nth-child(n 2)) de la table cliquée.
3. Logique de tri : Créez un comparateur de fonction de tri qui prend deux arguments : l'index de colonne idx et un indicateur asc. Cette fonction trie les lignes en fonction du contenu textuel de la colonne cliquée.
4. Mises à jour du tableau : Après avoir trié les lignes, ajoutez-les à nouveau dans le tableau dans le nouvel ordre.

Exemple de code en JavaScript et 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>

Cette solution trie efficacement les tableaux HTML par ordre alphabétique d'un simple clic sur l'en-tête de colonne, sans aucune dépendance externe. Sa simplicité et sa compatibilité avec les principaux navigateurs en font une option adaptée à de nombreux besoins de tri.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!