Comment trier les tableaux HTML par valeur de colonne avec JavaScript ?

Tri des tableaux HTML avec JavaScript : un guide complet

Le tri des tableaux est une exigence courante dans le développement Web. Dans cet article, nous explorerons une solution JavaScript simple et efficace qui vous permet de trier chaque colonne d'un tableau HTML par ordre alphabétique, ascendant et décroissant.

Énoncé du problème :

La tâche consiste à développer une solution JavaScript capable de trier un tableau HTML donné par valeur de chaque colonne, de A à Z et de Z à A. La solution ne doit ignorer aucun code ou chiffre et ne doit pas fonctionner avec des devises.

Solution :

Le code JavaScript fourni fournit une solution au problème de tri. Il utilise du JavaScript simple (ES6) et prend en charge le tri alphabétique et numérique, par ordre croissant et décroissant.

Détails de mise en œuvre :

1. Ajouter événements de clic vers les cellules d'en-tête : Chaque cellule d'en-tête (th) est équipée d'un écouteur d'événement de clic.
2. Récupérer les lignes du tableau : Pour le tableau actuel, toutes les lignes sauf la première ligne (ligne d'en-tête) sont extraites.
3. Trier les lignes en fonction de la valeur de la colonne : Les lignes récupérées sont triées à l'aide de la fonction comparer, qui vérifie si les valeurs sont numériques et les trie en conséquence, ou exécute une comparaison de chaînes tenant compte des paramètres régionaux.
4. Réorganiser les lignes du tableau : Les lignes triées sont réinsérées dans le tableau HTML dans l'ordre calculé.

Utilisation :

Pour implémenter cette solution, incluez l'extrait de code JavaScript dans votre document HTML et stylisez le tableau et les cellules d'en-tête à l'aide de CSS. Cliquer sur n'importe quelle cellule d'en-tête triera la colonne correspondante.

Conclusion :

La solution JavaScript fournie offre un moyen robuste et personnalisable de trier les tableaux HTML par valeur de colonne. Il prend en charge le tri alphabétique et numérique, gérant ainsi différents types de données de manière transparente. Le code concis et efficace offre une approche pratique pour améliorer les fonctionnalités de vos tableaux HTML.

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!