Tableau HTML : Trier et classer les colonnes en JS

Vous souhaitez améliorer l’interactivité d’un tableau HTML en permettant à vos utilisateurs de trier et classer les données en JS facilement ?

Dans ce tutoriel, nous allons vous montrer comment utiliser JavaScript pour trier et organiser les colonnes d’un tableau HTML de manière simple et efficace. Que vous soyez débutant ou développeur expérimenté, vous découvrirez des techniques pratiques pour manipuler les données d’un tableau, améliorer l’expérience utilisateur et rendre vos pages web plus dynamiques.

Suivez ce guide pour maîtriser l’art de trier les colonnes d’un tableau HTML avec du code JavaScript !

Un tableau simple en HTML

Étape 1 : Créer la structure de base du tableau en HTML

Les tableaux HTML sont utilisés pour afficher des informations sous forme de lignes et de colonnes. Ils sont très utiles pour organiser des données comme des listes d’utilisateurs, des produits, ou même des résultats financiers. Parfois, on a besoin de trier ces données pour les rendre plus lisibles et plus faciles à analyser. C’est là qu’intervient JavaScript ! Mais commençons par coder un tableau simple en HTML.

Un tableau HTML est créé avec les balises <table>, <tr>, <th>, et <td>. Voici ce que chaque balise signifie :

• <table> : commence un tableau.
• <tr> : définit une ligne du tableau.
• <th> : définit une cellule d’en-tête (utilisée pour les titres des colonnes).
• <td> : définit une cellule de données (pour les données que tu veux afficher).

Un tableau HTML est un élément structuré qui contient des données organisées en lignes et en colonnes. Chaque ligne est définie par une balise <tr>, et chaque cellule (ou donnée) dans une ligne est définie par une balise <td>. Un tableau peut aussi avoir des en-têtes définis avec la balise <th>.

Étape 2 : Créer le tableau avec 5 colonnes et 4 lignes

Voici un exemple de tableau avec 5 colonnes et 4 lignes, et des données remplies dedans :

<table id="monTableau" border="1">
    <!-- Première ligne : les en-têtes du tableau -->
    <tr>
        <th>Nom</th>
        <th>Âge</th>
        <th>Ville</th>
        <th>Profession</th>
        <th>Hobby</th>
    </tr>

    <!-- Deuxième ligne : les données -->
    <tr>
        <td>Alban</td>
        <td>43</td>
        <td>Troyes</td>
        <td>Développeur</td>
        <td>Informatique</td>
    </tr>

    <!-- Troisième ligne : les données -->
    <tr>
        <td>Emma</td>
        <td>29</td>
        <td>Paris</td>
        <td>Designer</td>
        <td>Art</td>
    </tr>

    <!-- Quatrième ligne : les données -->
    <tr>
        <td>Lucas</td>
        <td>35</td>
        <td>Lyon</td>
        <td>Chef de projet</td>
        <td>Voyages</td>
    </tr>

    <!-- Cinquième ligne : les données -->
    <tr>
        <td>Sophie</td>
        <td>30</td>
        <td>Marseille</td>
        <td>Marketeuse</td>
        <td>Lecture</td>
    </tr>
</table>

Explication :

• <table border="1"> : On a ajouté l’attribut border="1" pour afficher les bordures autour du tableau. Cela permet de mieux visualiser les cellules.
• <th> : Les cellules d’en-tête qui contiennent les titres de chaque colonne, comme « Nom », « Âge », « Ville », etc.
• <td> : Les cellules qui contiennent les données pour chaque personne dans ce cas.

Résultat :

Des formations informatique pour tous !

Débutant ou curieux ? Apprenez le développement web, le référencement, le webmarketing, la bureautique, à maîtriser vos appareils Apple et bien plus encore…

Formateur indépendant, professionnel du web depuis 2006, je vous accompagne pas à pas et en cours particulier, que vous soyez débutant ou que vous souhaitiez progresser. En visio, à votre rythme, et toujours avec pédagogie.

Découvrez mes formations Qui suis-je ?

Ce tableau affichera un tableau avec 5 colonnes et 4 lignes de données, organisées comme suit :

Ce tableau affiche des informations sur plusieurs personnes, comme leur nom, âge, ville, profession et hobby. Nous allons maintenant apprendre à trier ces colonnes de manière dynamique avec JavaScript.

Ajouter du JavaScript ou JS pour trier et classer les colonnes du tableau HTML

Étape 1 : Créer la fonction pour trier les colonnes

Pour trier les données d’un tableau, nous devons d’abord créer une fonction JavaScript qui permet de trier les lignes selon la colonne que nous avons choisie. Imaginons que nous voulons trier la colonne « Âge », nous allons écrire une fonction qui effectue ce tri.

Code JavaScript pour trier une colonne :

<script>
    function trierColonne(index) {
        var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
        table = document.getElementById("monTableau");
        switching = true;
        dir = "asc"; // Tri croissant par défaut

        // Boucle pour continuer jusqu'à ce que le tri soit terminé
        while (switching) {
            switching = false;
            rows = table.rows;

            // Parcours des lignes du tableau
            for (i = 1; i < (rows.length - 1); i++) {
                shouldSwitch = false;
                x = rows[i].getElementsByTagName("TD")[index];
                y = rows[i + 1].getElementsByTagName("TD")[index];

                // Vérifier si les lignes doivent être échangées
                if (dir == "asc") {
                    if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
                        shouldSwitch = true;
                        break;
                    }
                } else if (dir == "desc") {
                    if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
                        shouldSwitch = true;
                        break;
                    }
                }
            }
            if (shouldSwitch) {
                // Échanger les lignes
                rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
                switching = true;
                switchcount++;
            } else {
                // Inverser la direction si aucune ligne n'a été échangée
                if (switchcount == 0 && dir == "asc") {
                    dir = "desc";
                    switching = true;
                }
            }
        }
    }
</script>

Explication du code :

• Initialisation des variables :
  • table : récupère le tableau HTML par son ID.
  • rows : récupère toutes les lignes du tableau.
  • switching : un indicateur pour savoir si nous devons continuer à trier.
  • dir : définit la direction du tri (ascendant ou descendant).
• Boucle principale de tri :
  • La boucle continue tant qu’il y a des lignes à trier.
  • À chaque itération, elle compare les cellules de deux lignes adjacentes pour décider si elles doivent être échangées.
• Échanger les lignes :
  • Si une ligne doit être échangée, nous utilisons la méthode insertBefore() pour réorganiser les lignes dans le tableau.
• Inverser la direction du tri :
  • Si le tableau a été trié dans un sens (par exemple, de A à Z), on inverse la direction pour trier de Z à A la prochaine fois.

Étape 2 : Ajouter un événement pour trier les colonnes au clic

Maintenant, nous allons ajouter des événements de clic sur les en-têtes de colonnes afin que l’utilisateur puisse trier les colonnes simplement en cliquant dessus.

Code HTML pour ajouter des événements de clic :

<script>
    // Ajout d'un événement pour chaque en-tête de colonne
    document.querySelectorAll("th").forEach(function(th, index) {
        th.addEventListener("click", function() {
            trierColonne(index); // Appelle la fonction de tri en fonction de l'index de la colonne
        });
    });
</script>

Explication du code :

• Nous avons sélectionné tous les éléments <th> (les en-têtes de colonne) et avons ajouté un écouteur d’événements à chaque en-tête.
• Lorsqu’un en-tête est cliqué, la fonction trierColonne(index) est appelée avec l’index de la colonne cliquée en paramètre. Cela permet de trier la colonne correspondante.

Étape 3 : Testez votre tableau triable

Maintenant que nous avons ajouté la fonction de tri et les événements de clic, vous pouvez tester votre tableau. Lorsque vous cliquez sur les en-têtes des colonnes, les données du tableau seront triées par la colonne correspondante, soit de manière croissante (A-Z ou 1-10), soit décroissante (Z-A ou 10-1), selon l’état actuel du tri.

Conclusion

Félicitations ! Vous avez maintenant un tableau HTML interactif capable de trier et classer ses colonnes à l’aide de JavaScript. Ce processus est très utile pour les tableaux contenant beaucoup de données, car il permet aux utilisateurs de trouver rapidement ce qu’ils cherchent. N’oubliez pas que vous pouvez appliquer cette technique à n’importe quel tableau HTML et l’adapter à vos besoins spécifiques.

Alban

Fondateur de l’agence Créa-troyes.
Intervenant en Freelance.
Contactez-moi

crea-troyes.fr