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 :

OnMouseOver sur 2 <TR>


Sujet :

JavaScript

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre éclairé Avatar de amerex
    Homme Profil pro
    Analyste Support et Développement
    Inscrit en
    Septembre 2007
    Messages
    246
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Canada

    Informations professionnelles :
    Activité : Analyste Support et Développement
    Secteur : Finance

    Informations forums :
    Inscription : Septembre 2007
    Messages : 246
    Par défaut OnMouseOver sur 2 <TR>
    Bonjour!
    J'essaie de faire ceci:

    Dans un tableau, j'ai ceci:
    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
    18
    <table>
       <tr id='aaa'>
              <td>
              </td>
       </tr>
       <tr id='aaa'>
              <td>
              </td>
       </tr>
       <tr id='bbb'>
              <td>
              </td>
       </tr>
       <tr id='bbb'>
              <td>
              </td>
       </tr>
    </table>

    Comment puis-je, changer la couleur de fond des deux <tr id='aaa'> en même temps ? Voici ce que j'ai essayé, mais sans succès...
    Code JavaScript : Sélectionner tout - Visualiser dans une fenêtre à part
    <tr id="aaa" onMouseOver="document.getElementById('aaa').style.backgroundColor='blue'">

    Mais les deux <tr id='aaa'> ne changement pas, le code change seulement le premier...

  2. #2
    Expert confirmé
    Avatar de Watilin
    Homme Profil pro
    En recherche d'emploi
    Inscrit en
    Juin 2010
    Messages
    3 100
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 36
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : En recherche d'emploi

    Informations forums :
    Inscription : Juin 2010
    Messages : 3 100
    Par défaut
    C'est parce qu'un id doit être unique. Comme tu as deux éléments identifiées "aaa" dans ta page, ton navigateur doit en choisir un ; tu n'as aucune garantie sur celui qui va être choisi, si ce sera le premier, le dernier, s'il sera choisi au hasard, si ce sera toujours le même, etc.

    En revanche, tu peux attribuer des classes à tes éléments pour les regrouper par « signification ». C'est une forme de typage si on y réfléchit, et on appelle parfois cela une micro-syntaxe.

    Mais bref, plus concrètement, si tu sélectionnes des éléments par leur classe, tu te retrouves non pas avec un seul élément, mais un groupe. Il faut donc que tu parcoures chaque élément du groupe avec une boucle pour lui attribuer sa couleur de fond.

    Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <tr class="aaa">
      ...
    </tr>
    <tr class="aaa">
      ...
    </tr>
    <tr class="bbb">
      ...
    </tr>
    <tr class="bbb">
      ...
    </tr>
    Code JS : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    var rows = document.getElementsByClassName("aaa");
    for (var i = 0, l = rows.length; i < l; i++) {
      rows[i].style.backgroundColor = "blue";
    }
    Deux remarques à propos de la fonction getElementsByClassName :
    1. elle n'est pas supportée par les vieux navigateurs, il te faut donc proposer une solution de remplacement ;
    2. elle peut prendre beaucoup de temps si tu l'appelles depuis document, aussi il est préférable de l'appeler depuis un élément que tu sais parent de tous les éléments que tu cibles. En l'occurence, ton élément <table>.
    La FAQ JavaScript – Les cours JavaScript
    Touche F12 = la console → l’outil indispensable pour développer en JavaScript !

  3. #3
    Membre éclairé Avatar de amerex
    Homme Profil pro
    Analyste Support et Développement
    Inscrit en
    Septembre 2007
    Messages
    246
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Canada

    Informations professionnelles :
    Activité : Analyste Support et Développement
    Secteur : Finance

    Informations forums :
    Inscription : Septembre 2007
    Messages : 246
    Par défaut
    Merci Beaucoup, explication très claire, j'ai tout compris, et maintenant, ça fonctionne très bien !

    Merci!

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

Discussions similaires

  1. Evenement onmouseover sur le survol d'un "option" d'un "select"
    Par Bartuk dans le forum Général JavaScript
    Réponses: 13
    Dernier message: 11/05/2006, 17h43
  2. [Avertis]Problème Infobulle/Popup Onmouseover sur une image
    Par Yanos dans le forum Général JavaScript
    Réponses: 8
    Dernier message: 04/05/2006, 14h10
  3. evenement onmouseover sur element HTML disabled
    Par danyboy85 dans le forum Balisage (X)HTML et validation W3C
    Réponses: 2
    Dernier message: 05/04/2006, 12h04
  4. [VB.NET] onmouseover sur ligne du datagrid
    Par lucie.houel dans le forum ASP.NET
    Réponses: 4
    Dernier message: 21/11/2005, 09h28

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