Sujet Précédent Sujet Suivant

Javascript/CSS : Afficher/cacher plusieurs ID

Résolu/Fermé
Vincent - 5 sept. 2008 à 08:45
 Vincent - 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>
A voir également:

12 réponses

Réponse 1 / 12
Mimiste Messages postés 1149 Date d'inscription samedi 17 mai 2008 Statut Membre Dernière intervention 6 mars 2016 206
5 sept. 2008 à 10:32
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>
3
Réponse 2 / 12
Vincent
5 sept. 2008 à 09:35
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 ?
2
Réponse 3 / 12
Mimiste Messages postés 1149 Date d'inscription samedi 17 mai 2008 Statut Membre Dernière intervention 6 mars 2016 206
5 sept. 2008 à 09:46
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é
2
Réponse 4 / 12
Vincent
5 sept. 2008 à 10:35
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
2

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 12
Mimiste Messages postés 1149 Date d'inscription samedi 17 mai 2008 Statut Membre Dernière intervention 6 mars 2016 206
5 sept. 2008 à 10:44
ben en 2 secondes je dirai en mettant le css sur chaque tr

<tr style="display:none;">
2
Réponse 6 / 12
Mimiste Messages postés 1149 Date d'inscription samedi 17 mai 2008 Statut Membre Dernière intervention 6 mars 2016 206
5 sept. 2008 à 09:14
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
1
Réponse 7 / 12
Vincent
5 sept. 2008 à 09:21
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 ?
1
Mimiste Messages postés 1149 Date d'inscription samedi 17 mai 2008 Statut Membre Dernière intervention 6 mars 2016 206
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
0
Réponse 8 / 12
Vincent
5 sept. 2008 à 09:31
je teste ;)
1
Réponse 9 / 12
Mimiste Messages postés 1149 Date d'inscription samedi 17 mai 2008 Statut Membre Dernière intervention 6 mars 2016 206
5 sept. 2008 à 10:22
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
1
Réponse 10 / 12
Vincent
5 sept. 2008 à 11:08
Simple mais efficace !

Grand merci à toi Mimiste !!!!!!!!!!!!!!!!!!!!
1
Réponse 11 / 12
Vincent
5 sept. 2008 à 09:59
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 ????
0
Réponse 12 / 12
Vincent
5 sept. 2008 à 10:28
fait suer IE !

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

Vincent ;)
0

Discussions similaires

[CSS] Forcé retour à la ligne
aKuma59 -
zigoss -

33 réponses
trait horizontal avec du css
tipi75 -
tipi75 -

8 réponses
Javascript Arrondi à 2 chiffres après la virgule
jeremy -
gravityaerox -

12 réponses
java script error in the main process
ceciel2307 -
Thibaut -

3 réponses
[CSS] Mettre un objet au premier plan
Achillion -
tiran58 -

2 réponses