Discussion :

[TripleCheeeze]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[mathieu]

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

[TripleCheeeze]

Merci !

[Doksuri]

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

[TripleCheeeze]

ça marche bien aussi merci !

[mathieu]

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 ?

[Doksuri]

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[NoSmoking]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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()

[Toufik83]

Bonjour,

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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);

[NoSmoking]

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

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

[Toufik83]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

if(elClicked.nodeName=="TD")

[NoSmoking]

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

donc autant le faire