Posez votre question Signaler

Javascript/CSS : Afficher/cacher plusieurs ID [Résolu]

Vincent - Dernière réponse le 5 sept. 2008 à 11:08
Bonjour,
J'ai deux boutons qui affichent/cachent des lignes d'un tableau. J'arrive à afficher/cacher la première ligne de chaque série d'id, mais pas celles en dessous (elles restent cachées).
Vous voyez ce que je veux dire ?
Je mets les sources en dessous.
Merci de toute l'aide que vous pourrez m'apporter ;)
Le Css pour dire qu'on le cache par défaut :
<style type="text/css">
#li_1 { display:none; }
#li_2 { display:none; }
</style>
Les boutons qui cachent/affichent :
<li onclick="openClose('li_1');"><img src="interface/icone_loupe.gif" /></li>
<li onclick="openClose('li_2');"><img src="interface/icone_loupe.gif" /></li>
Et le tableau avec les lignes :
<table>
<tr id="li_1">
<td><li ><td>
<td>blabla 1.1</td>
</tr>
<tr id="li_1">
<td><td>
<td>blabla 1.2</td>
</tr>
<tr id="li_2">
<td><li ><td>
<td>blabla2.1</td>
</tr>
<tr id="li_2">
<td><td>
<td>blabla2.2</td>
</tr>
</table>
Lire la suite 

Javascript/CSS : Afficher/cacher plusieurs ID »

13 réponses
Réponse
+3
moins plus
tien j'ai trouvé une version corrigée pour IE, sa fais un peu bricolage mais sa marche

<script language="javascript">
function openClose(name)
{

var elt = getElementsByName_iefix('tr', name);

for (var i=0; i<elt.length; i++)
{
if (elt[i].style.display == 'none') {
elt[i].style.display = '';
} else {
elt[i].style.display = 'none';
}

}

}


function getElementsByName_iefix(tag, name) {

var elem = document.getElementsByTagName(tag);
var arr = new Array();
for(i = 0,iarr = 0; i < elem.length; i++) {
att = elem[i].getAttribute("name");
if(att == name) {
arr[iarr] = elem[i];
iarr++;
}
}
return arr;
}

</script>
Ajouter un commentaire
Réponse
+2
moins plus
oui du coup tu n'a plus un seul element dans ta variable "elt" tu a un tableau indexé de plusieurs elements (autant d'element qu'il trouve de name identique. Il faut le parcourir a l'aide d'une boucle

for (var i=0; i<elt.length; i++){

if (elt[i].style.display == 'none')
elt[i].style.display = 'block';
else
elt[i].style.display = 'none';
}

}

voila sa doit etre quelque chose du genre si je me suis pas planté
Ajouter un commentaire
Réponse
+2
moins plus
nickel, me reste à trouver comment faire pour que ce soit caché par défaut et non ouvert ;)

Tu as la réponse en deux secondes ? :p
Ajouter un commentaire
Réponse
+2
moins plus
ben en 2 secondes je dirai en mettant le css sur chaque tr

<tr style="display:none;">
Ajouter un commentaire
Réponse
+1
moins plus
Bonjour

C'est tout a fais normal car un ID est unique, il ne peux pas y avoir plusieur balises qui portent le même ID dans ta page (a la difference de NAME qui lui n'est pas forcement unique).
Il execute l'instruction sur la premiere balise qu'il rencontre en parcourant la page et il s'arrete la, il ne va pas voir si il y a d'autres ID identique car elle sont sencé etre unique. C'est donc pour cela que seule la premiere ligne du tableau est cachée et pas la seconde
Ajouter un commentaire
Réponse
+1
moins plus
Oui, mais j'ai cru voir sur internet qu'il y a des systèmes de class en javascript qui permettent de changer plusieurs ID.

Est-ce vrai ?

Est-ce que je peux utiliser name à la place d'id alors ?
Mimiste- 5 sept. 2008 à 09:30
Oui tu peux utiliser name avec la fonction document.getElementsByName("name") qui te renvoi un tableau contenant les objets correspondants
Ajouter un commentaire
Réponse
+1
moins plus
je teste ;)
Ajouter un commentaire
Réponse
+1
moins plus
Voilà le script que j'avais :
<script language="javascript">
function openClose(id)
{
if(document.getElementById)
var elt = document.getElementById(id);
else if(document.all)
var elt = document.all[ id];
else
return;

if (elt.style) {
if (elt.style.display == 'none')
elt.style.display = 'block';
else
elt.style.display = 'none';
}
}
</script>

J'ai remplacé les "getElementById" par "getElementsByName" mais ca ne marche pas.
J'ai aussi changé la balise id dans le <tr> par name, marche pas non plus.

Une idée ?
Ajouter un commentaire
Réponse
+1
moins plus
Ce qui est etonnant c'est que ça marche sur Firefox et sur chrome, je croi bien que c'est encore une histoire avec IE -_- Il a pas l'air d'aimer le name dans un tr
Ajouter un commentaire
Réponse
+1
moins plus
Simple mais efficace !

Grand merci à toi Mimiste !!!!!!!!!!!!!!!!!!!!
Ajouter un commentaire
Réponse
+0
moins plus
J'ai donc pour le script :
<script language="javascript">
function openClose(name)
{
if(document.getElementsByName)
var elt = document.getElementsByName(name);
else if(document.all)
var elt = document.all[ id];
else
return;

for (var i=0; i<elt.length; i++)
{
if (elt[i].style.display == 'none')
elt[i].style.display = 'block';
else
elt[i].style.display = 'none';
}
}
</script>

Pour le tableau :

<table>
<tr name="li_1">
<td><td>
<td>blabla</td>
<td></td>
</tr>
<tr name="li_1">
<td><li ><td>
<td>dsfsdf</td>
<td></li></td>
</tr>
</table>

Pour le bouton :
<li onclick="openClose('li_1');"><img src="interface/icone_loupe.gif" /></li>


Ca ne marche pooo :(

tu as encore un peu de temps pour m'aider ????
Ajouter un commentaire
Réponse
+0
moins plus
fait suer IE !

Comment faire alors ? Organiser un putch pour virer IE du net ou faire avec en trouvant une autre solution ?

Vincent ;)
Ajouter un commentaire
Ce document intitulé « Javascript/CSS : Afficher/cacher plusieurs ID » issu de CommentCaMarche (www.commentcamarche.net) est mis à disposition sous les termes de la licence Creative Commons. Vous pouvez copier, modifier des copies de cette page, dans les conditions fixées par la licence, tant que cette note apparaît clairement.
Dossier à la une
Passage au tout numérique : quel coût pour les particuliers ?