IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

addEventLIstener sur chaque cellule d'un tableau


Sujet :

JavaScript

  1. #1
    Candidat au Club
    Homme Profil pro
    Étudiant
    Inscrit en
    septembre 2022
    Messages
    3
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : septembre 2022
    Messages : 3
    Points : 2
    Points
    2
    Par défaut 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 : 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";
    });

  2. #2
    Expert éminent sénior
    Avatar de mathieu
    Profil pro
    Inscrit en
    juin 2003
    Messages
    9 253
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : juin 2003
    Messages : 9 253
    Points : 14 172
    Points
    14 172
    Par défaut
    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

  3. #3
    Candidat au Club
    Homme Profil pro
    Étudiant
    Inscrit en
    septembre 2022
    Messages
    3
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : septembre 2022
    Messages : 3
    Points : 2
    Points
    2
    Par défaut
    Merci !

  4. #4
    Expert confirmé
    Avatar de Doksuri
    Profil pro
    Développeur Web
    Inscrit en
    juin 2006
    Messages
    2 266
    Détails du profil
    Informations personnelles :
    Âge : 52
    Localisation : France

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : juin 2006
    Messages : 2 266
    Points : 4 154
    Points
    4 154
    Par défaut
    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
    La forme des pyramides prouve que l'Homme a toujours tendance a en faire de moins en moins.

    Venez discuter sur le Chat de Développez !

  5. #5
    Candidat au Club
    Homme Profil pro
    Étudiant
    Inscrit en
    septembre 2022
    Messages
    3
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : septembre 2022
    Messages : 3
    Points : 2
    Points
    2
    Par défaut
    ça marche bien aussi merci !

  6. #6
    Expert éminent sénior
    Avatar de mathieu
    Profil pro
    Inscrit en
    juin 2003
    Messages
    9 253
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : juin 2003
    Messages : 9 253
    Points : 14 172
    Points
    14 172
    Par défaut
    Citation Envoyé par Doksuri Voir le message
    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 ?

  7. #7
    Expert confirmé
    Avatar de Doksuri
    Profil pro
    Développeur Web
    Inscrit en
    juin 2006
    Messages
    2 266
    Détails du profil
    Informations personnelles :
    Âge : 52
    Localisation : France

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : juin 2006
    Messages : 2 266
    Points : 4 154
    Points
    4 154
    Par défaut
    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);
    });
    La forme des pyramides prouve que l'Homme a toujours tendance a en faire de moins en moins.

    Venez discuter sur le Chat de Développez !

  8. #8
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    16 153
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 16 153
    Points : 41 149
    Points
    41 149
    Par défaut
    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()

  9. #9
    Expert confirmé Avatar de Toufik83
    Homme Profil pro
    Développeur informatique
    Inscrit en
    janvier 2012
    Messages
    2 094
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : Suisse

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : janvier 2012
    Messages : 2 094
    Points : 4 049
    Points
    4 049
    Par défaut
    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);

  10. #10
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    16 153
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 16 153
    Points : 41 149
    Points
    41 149
    Par défaut
    elClicked.nodeName.toLowerCase()=="td"
    la conversion est inutile, parce que nodeName et tagName renvoi une valeur en majuscule.

  11. #11
    Expert confirmé Avatar de Toufik83
    Homme Profil pro
    Développeur informatique
    Inscrit en
    janvier 2012
    Messages
    2 094
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : Suisse

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : janvier 2012
    Messages : 2 094
    Points : 4 049
    Points
    4 049
    Par défaut
    Citation Envoyé par NoSmoking Voir le message
    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")

  12. #12
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    16 153
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 16 153
    Points : 41 149
    Points
    41 149
    Par défaut
    ...je sais qu'on peut faire plus simple et effectuer ...
    donc autant le faire

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. [XL-2007] enlever un espace de fin sur chaque cellule en vba
    Par jords dans le forum Macros et VBA Excel
    Réponses: 4
    Dernier message: 27/06/2012, 16h44
  2. Faire que chaque cellule d'un tableau soit égale en largeur
    Par dev14 dans le forum Balisage (X)HTML et validation W3C
    Réponses: 4
    Dernier message: 03/04/2012, 22h44
  3. Boutons sur chaque ligne d'un tableau.
    Par Mailgifson dans le forum Servlets/JSP
    Réponses: 12
    Dernier message: 24/06/2011, 15h55
  4. [PPT-2007] Dégradé sur les cellules d'un tableau
    Par TheCaribouX dans le forum Powerpoint
    Réponses: 2
    Dernier message: 29/09/2009, 10h14
  5. [HTML, CSS, JS] Clic sur une cellule d'un tableau pour changer sa class CSS
    Par Nyphel dans le forum Balisage (X)HTML et validation W3C
    Réponses: 3
    Dernier message: 21/08/2007, 13h18

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo