Discussion :

[fre3d0m]

Bonjour,

Je souhaite lors d'un clique sur un texte afficher/masquer certaines colonnes d'un tableau, hors le problème qui se pose avec mes scripts c'est que seul la première occurence est affectée, l'action n'est pas répercutée sur toutes les colonnes disposant de ce même id. voici mon code :

fonction javascript :

Code :

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

1
2
3
4
5
6
7
8
9
<!-- Masque ou pas les services -->
<script language="JavaScript" type="text/JavaScript">
function afficher(div) {
 
		document.getElementById(div).style.display =  (document.getElementById(div).style.display=='' ? 'none' : '');		
 
}
</script>
<!-- fin de fonction de masque -->

le texte qui gère l'affichage ou le masque :
<?php echo '<a href="javascript:afficher(\''.$cle.'\')">'.$cle.''; ?>

les colonnes (simplifiées) à afficher ou à masquer :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<tr id="<?php echo $cle ?>">
  <td>blablabla</td>
  <td>blablabla</td>
  <td>blablabla</td>
</tr>
<tr id="<?php echo $machintruc ?>">
  <td>blablabla</td>
  <td>blablabla</td>
  <td>blablabla</td>
</tr>
<tr id="<?php echo $cle ?>">
  <td>blablabla</td>
  <td>blablabla</td>
  <td>blablabla</td>
</tr>

voila au clique du texte je souhaite donc masquer les deux colonnes concernées identifiées avec la variables $cle mais une seule ( la première se masque ou s'affiche ) alors que deux colonnes disposent du même id.

Quelqu'un sait-il comment contourner le problème ?

[Bovino]

L'utilisation de JavaScript présuppose que le HTML auquel il est rattaché est valide, or un id doit être unique dans un document
Tu peux en revanche donner des noms d'id différents (par exemple cle1 et cle2 puis utiliser l'excellente contribution de SpaceFrog.

[emmanuel.remy]

Salut,

Et pour compléter l'observation de Bovino garder sous le code la nouvelle API des Selectors implantée notamment dans Firefox 3.5 (par exemple pour la première colonne):

Code :

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

1
2
3
 
var cellullesACacher = document.querySelectorAll("#idTable>tbody>tr>td:nth-of-type(1)");
...

ERE