Modification des cellules d'un tableau HTML en JavaScript
Soit un tableau HTML #table.
Supposons que nous ayons la tâche de faire quelque chose
avec chaque cellule du tableau, par exemple, écrire
dans chacune d'elles le texte '!'.
Discutons des nuances de la résolution d'une telle tâche.
Comme vous le savez, un tableau HTML a une structure bidimensionnelle : il y a des lignes, et dans elles des cellules. On peut résoudre notre tâche de la manière suivante : parcourir les lignes avec une boucle et dans chaque ligne parcourir les cellules avec une boucle et effectuer sur elles l'action souhaitée. Le schéma de résolution présenté est similaire à la façon dont nous créerions un tel tableau, en le remplissant avec des lignes et des cellules.
Cependant, dans ce cas, deux boucles imbriquées
seraient superflues : on peut simplement obtenir toutes
les td et les parcourir avec une boucle, en effectuant
l'opération nécessaire. Faisons cela :
let tds = document.querySelectorAll('#table td');
for (let td of tds) {
td.textContent = '!';
}
Soit un tableau HTML avec des nombres et un bouton. Lorsqu'on clique sur le bouton, doublez le nombre dans chaque cellule du tableau.
