addEventLIstener sur chaque cellule d'un tableau

Bonjour !

Je cherche à faire en sorte que lorsqu'on clique sur une cellule d'un tableau, celle-ci change de couleur.
J'ai réussi à appliquer un écouteur sur ma balise <table> mais lors d'un clique, tout le tableau change de couleur (logique), mais je ne parviens pas à mettre un écouteur sur chaque cellule ( <td> )

Code:

---

1 2 3 4

let p = document.getElementById("monId"); p.addEventListener("click", function(e) { p.style.backgroundColor = "black"; });

---

vous pouvez essayer avec querySelectorAll pour récupérer la liste des cases :
https://developer.mozilla.org/fr/doc...erySelectorAll

et ensuite avec une boucle comme l'exemple là, vous pouvez attacher l'évènement de chaque case :
https://developer.mozilla.org/fr/doc...orrespondances

Merci !

je pense que le plus simple est de passer par "l'event delegation" davidwalsh.name/event-delegate (explications) comme ca, tu n'as pas a ecouter les centaines de cellules, et si tu en ajoutes dynamiquement, elles seront prises en compte

ça marche bien aussi merci !

Citation:

---

Envoyé par Doksuri

je pense que le plus simple est de passer par "l'event delegation"

---

mais s'il y a des éléments dans les cellules, l'évènement va être déclenché sur ces éléments et ne remontera pas jusqu'à "td", si ?

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

<table border="1"> <tr> <td><span>cell 0-0</span></td> <td><span>cell 0-1</span></td> <td><span>cell 0-2</span></td> </tr> <tr> <td><span>cell 1-0</span></td> <td><span>cell 1-1</span></td> <td><span>cell 1-2</span></td> </tr> <tr> <td><span>cell 2-0</span></td> <td><span>cell 2-1</span></td> <td><span>cell 2-2</span></td> </tr> </table>

---

Code:

---

1 2 3 4

document.querySelector('table').addEventListener('click', ({target}) => { console.log('span', target, target.textContent); console.log('td', target.parentNode); });

---

Bonjour,
une façon plus générique de faire est d'utiliser la méthode closest:

Code:

---

1 2 3 4 5 6 7 8 9 10 11

const oTable = document.getElementById('la_table'); oTable.addEventListener("click", (e) => { const elClicked = e.target; const elTD = elClicked.closest("TD"); if (elTD) { // ce que l'on a à faire } else { console.log("Raté !!!"); } });

---

on peut mettre en paramètre de closest un sélecteur CSS ce qui peut s'avérer utile.

↪ Element.closest()

Bonjour,

Une autre solution est de vérifier le nodeName de l'élément cliqué, si je reprends le code de NoSmoking :

Code:

---

1 2	if(elClicked.nodeName.toLowerCase()=="td") console.log("c'est un td"); else console.log("non, ce n'est pas un td :",elClicked.nodeName);

---

Citation:

---

elClicked.nodeName.toLowerCase()=="td"

---

la conversion est inutile, parce que nodeName et tagName renvoi une valeur en majuscule.

Citation:

---

Envoyé par NoSmoking

la conversion est inutile, parce que nodeName et tagName renvoi une valeur en majuscule.

---

Justement, c'est pour ça que j'ai utilisé toLowerCase() pour comparer le retour avec la chaine de caractère td en minuscule.

Sinon, je sais qu'on peut faire plus simple et effectuer la comparaison avec TD en majuscule....

Code:

---

if(elClicked.nodeName=="TD")

---

Citation:

---

...je sais qu'on peut faire plus simple et effectuer ...

---

donc autant le faire ;)