Comment trier les tableaux HTML avec JavaScript : une solution complète

Tri des tableaux HTML avec JavaScript : une solution simple revisitée

Trouver une solution de tri de tableaux appropriée en JavaScript peut être un défi. Vous devrez peut-être trier les colonnes par ordre alphabétique, y compris les chiffres, mais sans ignorer des caractères spécifiques ni gérer la devise.

Heureusement, il existe une solution JavaScript simple et efficace qui peut vous aider :

JavaScript simple (ES6) :

• Prend en charge le tri alphabétique et numérique par ordre croissant et décroissant
• Fonctionne dans Chrome, Firefox, Safari et même IE11

Détails de mise en œuvre :

1. Ajoutez un écouteur d'événement de clic à chaque cellule d'en-tête de tableau (th).
2. Récupérez toutes les lignes du tableau (sauf la première ) pour le tableau.
3. Triez les lignes en fonction de la valeur de la colonne cliquée.
4. Réinsérez les lignes triées dans le tableau.

Extrait de code :

<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>

Style :

Ajoutez le CSS suivant pour styliser le tableau et rendre les cellules d'en-tête cliquables :

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

Utilisation :

Incluez le JavaScript et le CSS dans votre document HTML et ajoutez un tableau avec des cellules d'en-tête et des lignes de données.

Exemple :

<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>

Conclusion :

Avec cette solution JavaScript simple et efficace, vous pouvez facilement trier les tableaux HTML d'un simple clic sur un en-tête de colonne, quelles que soient les données tapez.

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!