Script tritab : Script de tri dynamique de tableau
Trier dynaminquement un tableau en cliquant sur les titres de colonnes
Partie II : L'interactivité
Edition 1 | Chapitre 12 : Manipuler le document / Page 184
Edition 2 | Chapitre 12 : Manipuler le document / Page 199
Edition 3 | Chapitre 12 : Manipuler le document / Page 199
Exécution du script
Code source
<html><head><style type="text/css">body { height:300px; }i.fas { min-width: 20px;}.light { color:#999;}.active { color:#00d; } table.tritable { margin:5px; border-collapse: collapse; border: 1px solid black; } table.tritable th { font-size:15px; border: 1px solid black; padding:4px; cursor: pointer; background-color:#ddd; } table.tritable td { font-size:14px; border: 1px solid black; padding:4px; } table.tritable td.nb { text-align: right; }</style><title>Exemple complet du tri de tableau</title><script type="text/javascript">document.addEventListener("readystatechange", function(evt) { if (document.readyState=="interactive") { /* Trouver et parcourir tous les tableaux de classe tritable */ var elts=document.querySelectorAll("table.tritable"); for (var i=0; i<elts.length; i++) { elts[i].dataset.tritable=true; /* Rechercher toutes les en-têtes de l'élément i */ var ths=elts[i].querySelectorAll("th"); for (var j=0; j<ths.length; j++) { /* Ajout de l'icone indiquant la possibilité de tri */ ths[j].innerHTML+=" <i class=\"fas fa-sort light\"></i>"; ths[j].dataset.sens=""; /* Ajout de l'event click */ ths[j].addEventListener("click", triColonne, false); } } }}); /* Fonction appelée sur le clic du titre de colonne */ function triColonne(evt) { var elt=evt.currentTarget; var table=elt.parentElement.parentElement.parentElement; /* Mise à jour des icones du sens de tri sur tous les TH */ var ths=table.querySelectorAll("th"); for (var j=0; j<ths.length; j++) { var icon=ths[j].querySelector("i.fas"); if (ths[j]===elt) { /* On est sur la colonne cliquée */ /* Détermination du sens de tri en fonction du sens actuel */ if (ths[j].dataset.sens=="up") { var sens="down"; } else { var sens="up"; } icon.className="fas fa-sort-"+sens+" active"; /* Lancement du tri du tableau table sur la colonne j dans le bon sens */ ths[j].dataset.sens=sens; triTable(table, j, sens); } else { /* On repasse à l'icone non trié pour les autres colonnes */ ths[j].dataset.sens=""; icon.className="fas fa-sort light"; } }} /* Fonction de tri de la colonne numColonne de table en sens up ou down */function triTable(table, numColonne, sens) { var tbody=table.getElementsByTagName("tbody")[0]; var trs=tbody.getElementsByTagName("tr"); /* Liste des lignes TR */ var triABulle=true; /* Indicateur que le tri n'est pas terminé */ var nbMouvement=0; while (triABulle) { /* Tant que le tri n'est pas terminé */ var isInversion=false; /* Parcourir la liste des lignes de 1 (hors en-tête) à N-1 */ for (var i=1; i < trs.length - 1; i++) { var tdCi=trs[i].getElementsByTagName("td")[numColonne]; var tdCiplus1=trs[i+1].getElementsByTagName("td")[numColonne]; if (tdCi.className=="nb") { /* Colonne numérique : Conversion en nombres */ var ei=parseFloat(tdCi.innerText); var eiplus1=parseFloat(tdCiplus1.innerText); } else { /* Colonne text simple */ var ei=tdCi.innerText.toLowerCase(); var eiplus1=tdCiplus1.innerText.toLowerCase(); } if ((sens=="up") && ( ei > eiplus1 )) { /* Sens croissant, ligne i est plus grande que ligne i+1 : inversion */ isInversion=true; nbMouvement++; break; /* La boucle for est interrompue pour réaliser l'inversion */ } if ((sens=="down") && ( ei < eiplus1 )) { /* Sens décroissant, ligne i est plus petite que ligne i+1 : inversion */ isInversion=true; nbMouvement++; break; /* La boucle for est interrompue pour réaliser l'inversion*/ } } if (isInversion) { /* il faut inverser les lignes i et i+1 */ trs[i].parentNode.insertBefore(trs[i + 1], trs[i]); } else { /* Pas de mouvement, le tri à bulles est terminé */ triABulle=false; } } console.log(nbMouvement+" mouvements pour la colonne N°"+numColonne+" sens "+sens);} </script><link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous"></head><body> <h1 id="monH1" class="titre">Tri dynamique de tableau</h1><table class="tritable"> <tr> <th>Client</th> <th>Commandes</th> <th>Chiffre Affaires</th> </tr> <tr><td>Raymond</td><td class="nb">2</td><td class="nb">250</td></tr> <tr><td>Gérard</td><td class="nb">1</td><td class="nb">150</td></tr> <tr><td>Lucie</td><td class="nb">10</td><td class="nb">850</td></tr> <tr><td>Arthur</td><td class="nb">5</td><td class="nb">50</td></tr> <tr><td>Albert</td><td class="nb">2</td><td class="nb">62</td></tr> <tr><td>Bernard</td><td class="nb">4</td><td class="nb">80</td></tr> <tr><td>Marie</td><td class="nb">20</td><td class="nb">520</td></tr> <tr><td>Louis</td><td class="nb">15</td><td class="nb">90</td></tr></table></body></html>
Troisième édition Tout JavaScript chez Dunod
En savoir plusSortie le 4 janvier 2023
Version papier 29€90
Format électronique 22€99.
Commandez en ligneLe graph des objets JavaScript
Chargement
en cours...
