Discussion :

[amerex]

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...

[Watilin]

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>.

[amerex]

Merci Beaucoup, explication très claire, j'ai tout compris, et maintenant, ça fonctionne très bien !

Merci!