Maîtriser les tableaux HTML avec JavaScript

Formation

À Paris

Prix sur demande

Appeler le centre

Avez-vous besoin d'un coach de formation?

Il vous aidera à comparer différents cours et à trouver la solution la plus abordable.

Description

  • Typologie

    Formation

  • Lieu

    Paris

Grâce à cette formation vous pourrez acquérir les connaissances nécessaires qui vous permettrons d’ajouter des compétences à votre profil et obtenir de solides aptitude qui vous offriront de nombreuses opportunités professionnelles.

Les sites et dates disponibles

Lieu

Date de début

Paris ((75) Paris)
Voir plan
7 Cité Paradis, 75010

Date de début

Consulter

Questions / Réponses

Ajoutez votre question

Nos conseillers et autres utilisateurs pourront vous répondre

À qui souhaitez-vous addresser votre question?

Saisissez vos coordonnées pour recevoir une réponse

Nous ne publierons que votre nom et votre question

Les Avis

Le programme

Introduction du cours

Au cours de vos projets, vous serez sûrement amenés à développer, supprimer ou simplement lire le contenu d'un tableau HTML, surtout si vos structures, ou celles que vous devrez traiter, seront en tableaux HTML.
Ici, je vous présente une manière sûre d'y arriver.

Totalement sûre ?

Oui ! Totalement sûre, car les outils que nous allons utiliser sont issus du DOM level 1, c'est-à-dire l'ensemble des standards publiés par le W3C en 1998. Ils sont donc disponibles dans tous les navigateurs dès Internet Explorer 5 et Netscape 6.

Ce tutoriel demande des connaissances en JavaScript, et en particulier sur les objets.
Je vous invite donc à lire ce tutoriel. De plus, des connaissances préalables sur les DOM pourront vous être utiles. Enfin, et bien entendu, vous devez connaître les tableaux HTML. Néanmoins, on en reverra des éléments.

J'essaierai d'être le plus clair possible en expliquant les nouvelles notions. Pour vous aider à les assimiler, j'ai mis des exemples qui sont des applications directes, ainsi que des exercices pour aller plus loin où je vous mettrai du mieux que je peux sur la piste. Cependant, si vous ne comprenez pas, n'hésitez pas à me l'indiquer. Ces exercices sont primordiaux car ils vous entraînent également à la programmation.

Ainsi ce tutoriel ne s'adresse pas uniquement à ceux qui doivent traiter des tableaux HTML, mais aussi à tous ceux qui veulent progresser en JavaScript.

Pour éviter les confusions entre les tableaux du JavaScript et ceux du (x)HTML, j'appellerai les premiers « arrays » et les seconds « tableaux HTML ».

Présentation

Tout d'abord, je vais vous expliquer l'intérêt de maîtriser les tableaux par des objets JavaScript. En effet, peut-être avez-vous déjà eu recours pour cela à un mélange d'innerHTML et de RegEx (expressions régulières).

Cependant, cette méthode a ses limites. Tout simplement, elle est trop compliquée pour vous et trop longue pour votre ordinateur (c'est une règle d'or, n'abusez pas trop des RegEx : trop nombreuses, elles feront ralentir l'ordinateur de l'internaute et le site pourra devenir inutilisable !).

Comment ça ?? Il suffit d'être un peu débrouillard et le problème de complexité n'en est plus un !

Eh bien en fait non... Pour deux raisons :

  • votre code va sûrement être trifouillé par d'autres personnes que vous, et figurez-vous que lire une RegEx quand on ne l'a pas écrite soi-même est une chose très compliquée !

  • imaginez que vous réalisez un tableau dynamique, qui peut aussi contenir d'autres tableaux qui sont ajoutés par l'internaute ; de ce fait vous ne maîtrisez plus réellement son contenu. Là encore, vous pourrez vous débrouiller par de nombreuses RegEx, et ainsi passer de nombreuses heures à produire un code long, compliqué et fragile (fragile car une simple erreur va être difficile à retrouver !).

Désormais, vous allez donc utiliser les méthodes suivantes (elles seront davantage détaillées dans la partie suivante) :

  • objet.insertRow([index]) c'est-à-dire, ô ordinateur, dans ce tableau, insère une ligne s'il te plait, à cet endroit-là (le JavaScript est une langue plus abrégée que le français ) ;

  • objet.deleteRow(), ou supprime la ligne ;

  • objet.insertCell([index]), ou insère une colonne à cet endroit précis ;

  • objet.deleteCell(), ou supprime une cellule ;

  • objet.createTHead(), ou crée un haut de tableau ;

  • objet.deleteTHead(), ou supprime le haut de tableau ;

  • objet.createTFoot(), ou crée un bas de tableau ;

  • objet.deleteTFoot(), ou supprime le bas de tableau ;

  • objet.createCaption(), ou donne un titre au tableau ;

  • objet.deleteCaption(), ou supprime le titre du tableau.

Lorsque vous voyez un argument entre crochets, cela signifie qu'il est facultatif. Néanmoins tous les navigateurs ne respectent pas cela. Aussi, pour être au maximum compatible avec les différents navigateurs, vous devez toujours indiquer le paramètre de ces méthodes.

Certains programmeurs maîtrisent également les tableaux avec d'autres méthodes du DOM. Mais je préconise les méthodes précédentes, car votre code sera plus lisible, plus léger et plus facile pour vous à concevoir.

Se déplacer dans un tableauComprendre la structure d'un tableau

Un tableau est un élément XML constitué de :

  • sa structure principale (table) ;

  • sa légende (caption), qui est facultative ;

  • sa sous-structure (thead, tbody et tfoot), facultative également ;

  • ses lignes (tr) ;

  • ses cellules (td), voire ses cellules d'en-tête (th).

<table> <caption>Titre du tableau</caption> <thead><!-- en-tête --> <tr><!-- première ligne --> <th> Première cellule</th> </tr> </thead> <tbody> <tr><!-- seconde ligne du tableau et première de tbody--> <td> Première cellule de la ligne</td> </tr> </tbody> <tfoot> <tr><!-- seconde ligne --> <td> Première cellule</td> </tr> </tfoot> </table>Parcourir votre tableau

Cette partie est importante, car elle vous fera comprendre que JavaScript modélise les tableaux HTML en array.
De ce fait, la première ligne est la clé 0 de cet array, la seconde est la clé 1. Retenez bien cela, car sinon cela vous fournira systématiquement des erreurs.

Plutôt que de parler de la clé 1 de l'array « tableau », on peut parler du numéro 1 de l'index, ou même de l'indice 1. J'utiliserai désormais le terme d'indice, donc retenez-le bien.

Le tableau étant un array, il serait pratique d'appliquer les propriétés et méthodes des arrays.
Pour cela, on utilise la propriété rows (c'est une propriété, on ne mettra donc pas ()). Rows retourne un array contenant les lignes du tableau. Elle est applicable sur l'élément table, tbody, tfoot et thead.

Exemplevar arrayLignes = document.getElementById("monTableau").rows;Exercice n°1

0n va changer la couleur de fond du tableau. Une ligne aura un background de couleur claire (#bdcbf5), la suivante aura le sien de couleur plus foncée (#829eeb).
Ainsi, on devrait avoir quelque chose comme :

Si vous avez besoin d'aide, voici l'algorithme :

  1. on stocke l'array des lignes dans une variable ;

  2. si la clé de la ligne est paire, alors le background de la ligne sera clair ;

  3. sinon, le background sera foncé ;

  4. on retourne en 2 si on n'a toujours pas fini de parcourir l'array.

Petite astuce : pour savoir si un nombre est pair, vous faites if(nombre % 2 == 0) (% est le modulo, qui représente le reste de la division).

Vous avez trouvé ? Voici la réponse :

var arrayLignes = document.getElementById("monTableau").rows; //l'array est stocké dans une variable var longueur = arrayLignes.length;//on peut donc appliquer la propriété length var i=0; //on définit un incrémenteur qui représentera la clé while(i<longueur) { if(i % 2 == 0)//si la clé est paire { arrayLignes[i].style.backgroundColor = "#bdcbf5"; } else //elle est impaire { arrayLignes[i].style.backgroundColor = "#829eeb"; } i++; }

Pratique non ? :D

Vous pouvez faire de même avec cells qui va donner le tableau des cellules d'une ligne. Lorsqu'une cellule s'étend sur plusieurs lignes, cette cellule ne comptera que pour la première ligne. Cells est applicable sur une ligne comme ceci :

var arrayCellules = document.getElementById("maLigne").cells;Exercice n°2

Vous pouvez ainsi coloriser une colonne sur deux avec une couleur foncée et les autres avec une couleur claire. Pour cela, nous allons faire une boucle qui va appliquer le changement sur toutes les cellules de toutes les lignes du tableau. C'est-à-dire que nous allons faire une boucle dans une boucle.

var arrayLignes = document.getElementById("monTableau").rows; //on récupère les lignes du tableau var longueur = arrayLignes.length;//on peut donc appliquer la propriété length for(var i=0; i<longueur; i++)//on peut directement définir la variable i dans la boucle { var arrayColonnes = arrayLignes[i].cells;//on récupère les cellules de la ligne var largeur = arrayColonnes.length; for(var j=0; j<largeur; j++) { if(j % 2 == 0)//si la clé est paire { arrayColonnes[j].style.backgroundColor = "#bdcbf5"; } else //elle est impaire { arrayColonnes[j].style.backgroundColor = "#829eeb"; } } }

Maintenant, imaginez que vous vouliez afficher le numéro de la ligne sélectionnée.
Pour cela vous pourriez faire une boucle à nouveau, jusqu'à tomber sur la ligne sélectionnée, et ensuite afficher son numéro.
Ou... vous pouvez utiliser directement rowIndex qui vous indiquera le numéro dans l'array. Il faudra ensuite ajouter 1 au nombre renvoyé, car un array commence par 0.

Exemplefunction numeroLigne(ligne) { var numero = ligne.rowIndex; ligne.cells[0].innerHTML = numero+1; }

De même, il existe cellIndex qui va vous renseigner sur le numéro de la cellule dans la ligne.
Enfin, sachez également que sectionRowIndex donnera le numéro de la ligne par rapport à tbody, tfoot, et thead.

Ajouter du contenu dans un tableau

Maintenant que nous avons compris comment JavaScript gère les tableaux HTML, nous pouvons aller encore un peu plus loin, et découvrir comment ajouter des lignes et des cellules dans un tableau.
Si vous vous sentez un peu perdu, je vous invite à retravailler les exemples et exercices.

insertRow([index])

Cette méthode insère une ligne dans un tableau.
Comme vous le constatez, cette méthode utilise un argument facultatif. Il indique l'emplacement dans le tableau. Par défaut il vaut -1, c'est-à-dire à la fin du tableau. Cependant, une fois de plus, vous devez l'indiquer pour être compatible avec tous les navigateurs.

Attends... comment ça -1 ?!

En fait, si vous avez bien suivi la partie précédente, vous devez vous rappeler que la première ligne du tableau est une clé 0, la seconde ligne clé 1, etc.
Ainsi, la -1 est celle précédant la 0, c'est donc la dernière (oui, je dois reconnaître qu'une certaine logique m'échappe... :-° ). Pour autant, ne vous avisez pas d'écrire -2, ça n'existe pas !
InsertRow() est applicable sur table, tbody, tfoot, et thead.

var nouvelleLigne = document.getElementById("monBody").insertRow(-1);

insertRow() vous retourne la ligne créée. À ce moment là, vous remplissez la ligne avec des insertCell... (belle transition non ? ).

insertCell([index])

Son fonctionnement est quasi-identique à celui de insertRow(), sauf que cette fois-ci, on ajoute des cellules dans une ligne (et non pas dans un tableau, attention !). De plus, pour la remplir, vous pouvez utiliser la belle méthode insertData(decalage, string), mais qui n'est malheureusement pas compatible avec la plupart des navigateurs. On se contentera donc d'innerHTML.

Exemple

Imaginez que vous devez coder une plate-forme d'administration. Vous voulez réaliser un programme qui démarrera quand on clique sur un bouton. Ce programme va mettre dans un tableau les données (auteur, titre, jour, mois, année) de l'article. Dans ce tableau se trouvent aussi les données des articles précédents.
En gros, voici ce que nous allons demander à l'ordinateur via le JavaScript :

  • récupère le titre et l'auteur des champs du formulaire, ainsi que la date d'aujourd'hui ;

  • crée une nouvelle ligne dans le tableau ;

  • crée des nouvelles colonnes dans le tableau et places-y les données correspondantes.

<form method="post" action=""> <input type="text" name="titre" id="titre" /> <input type="text" name="auteur" id="auteur" /> <input type="button" onclick="ajouterLigne();" value="Enregistrer"/> </form> <table id="tableau" border="1"> <thead> <tr> <th>Titre</th> <th>Auteur</th> <th>Jour</th> <th>Mois</th> <th>Année</th> </tr> </thead> <tbody> <tr> <td>Premier article</td> <td>Pierre-Louis</td> <td>02</td> <td>06</td> <td>2007</td> </tr> <tr> <td>Mise-à-jour du système</td> <td>Admin</td> <td>01</td> <td>01</td> <td>2010</td> </tr> <tr> <td>Le site dans le futur !</td> <td>MystèreX</td> <td>20</td> <td>12</td> <td>2012</td> </tr> </tbody> </table>

Voici la solution commentée. Je l'ai fortement commentée pour vous aider à comprendre.

function ajouterLigne() { var tableau = document.getElementById("tableau"); var ligne = tableau.insertRow(-1);//on a ajouté une ligne var colonne1 = ligne.insertCell(0);//on a une ajouté une cellule colonne1.innerHTML += document.getElementById("titre").value;//on y met le contenu de titre var colonne2 = ligne.insertCell(1);//on ajoute la seconde cellule colonne2.innerHTML += document.getElementById("auteur").value; var date = new Date(); var colonne3 = ligne.insertCell(2); colonne3.innerHTML += date.getDate();//on ajoute le jour du mois var colonne4 = ligne.insertCell(3); colonne4.innerHTML += date.getMonth()+1;//les mois commencent par 0 var colonne5 = ligne.insertCell(4); colonne5.innerHTML += date.getFullYear(); }Exercice n°3

Eh bien maintenant, on peut encore aller un peu plus loin, et oui !
Nous allons partir de la même situation. Sauf que maintenant, il faut insérer la ligne de sorte que les dates soient classées par ordre croissant. En effet, vous pouvez voir que la dernière ligne du tableau HTML a pour date 20/12/2012. Il faudrait donc que la...

Appeler le centre

Avez-vous besoin d'un coach de formation?

Il vous aidera à comparer différents cours et à trouver la solution la plus abordable.

Maîtriser les tableaux HTML avec JavaScript

Prix sur demande