Javascript/CSS : Afficher/cacher plusieurs ID
Résolu
Vincent
-
Vincent -
Vincent -
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>
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:
- Javascript/CSS : Afficher/cacher plusieurs ID
- Telecharger javascript - Télécharger - Langages
- A javascript error occurred in the main process - Forum Windows
- A javaScript error occurred in the main process - Forum Handicap / Accessibilté
- Css exposant ✓ - Forum CSS
- Erreur #125 javascript - Forum Mozilla Firefox
12 réponses
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>
<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>
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 ?
<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 ?
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é
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é
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
Tu as la réponse en deux secondes ? :p
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
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
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
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 ?
Est-ce vrai ?
Est-ce que je peux utiliser name à la place d'id alors ?
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
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 ????
<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 ????
