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