High-Tech Santé Médecine Droit-Finances

Auto-Entrepreneur

Comment faire ?

Rechercher : dans
Par :

Javascript/CSS : Afficher/cacher plusieurs ID

Dernière réponse le 5 sep 2008 à 11:08:13 Vincent, le 5 sep 2008 à 08:45:04 
 Signaler ce message aux modérateurs

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>

Configuration: Windows Vista
Internet Explorer 7.0

Meilleures réponses pour « Javascript/CSS : Afficher/cacher plusieurs ID » dans :
Masquer/afficher Div avec CSS sans JS (Résolu) Voir
Javascript : fonction afficher / masquer (Résolu) Voir
Une popup d'information au survol sans Javascript ni CSS Voir Parfois, il peut être utile d'afficher des informations supplémentaire au survol du curseur sur une zone de l'écran, par exemple "Cliquez pour agrandir" sur une image, un descriptif sur une abbréviation ou des détails sur un lien. On trouve...
Javascript - Date de dernière modification de la page VoirIl est possible, en langage Javascript, d'afficher la date de dernière modification de la page Web grâce à la propriété lastModified de l'objet document :
Télécharger Web Developer Toolbar VoirWebDeveloper est une extension firefox représentant une formidable boîte à outils pour examiner et manipuler les pages web. On peut: Activer/Désactiver java, javascript, HTTP Referer, cache... Manipuler les cookies, les désactiver par domaines,...
Télécharger Firstpage VoirFirst Page 2006 est un éditeur html gratuit et excellent. Il permet de travailler un code HTML en couleur, ainsi que de prévisualiser le site. 1st Page 2006 supporte les standards HTML, XHTML, PHP, ASP, Cold Fusion, Javascript, CSS, SSI et Perl.
Posez votre question Répondre

1

Mimiste, le 5 sep 2008 à 09:14: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
La sportivité commence là où le diesel s'arrête !
You can still watch this ? Wait until the Vtec kick in !

   
Répondre à Mimiste

2

Vincent, le 5 sep 2008 à 09:21:06

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 ?

   
Répondre à Vincent

3

Mimiste, le 5 sep 2008 à 09:30:27

Oui tu peux utiliser name avec la fonction document.getElementsByName("name") qui te renvoi un tableau contenant les objets correspondants
La sportivité commence là où le diesel s'arrête !
You can still watch this ? Wait until the Vtec kick in !

   
Répondre à Mimiste

4

Vincent, le 5 sep 2008 à 09:31:13

Je teste ;)

   
Répondre à Vincent

5

Vincent, le 5 sep 2008 à 09:35:31

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 ?

   
Répondre à Vincent

6

Mimiste, le 5 sep 2008 à 09:46:46
  • +1

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é
La sportivité commence là où le diesel s'arrête !
You can still watch this ? Wait until the Vtec kick in !

   
Répondre à Mimiste

7

Vincent, le 5 sep 2008 à 09:59:37
  • +1

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

   
Répondre à Vincent

8

Mimiste, le 5 sep 2008 à 10:22:39

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
La sportivité commence là où le diesel s'arrête !
You can still watch this ? Wait until the Vtec kick in !

   
Répondre à Mimiste

9

Vincent, le 5 sep 2008 à 10:28:08

Fait suer IE !

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

Vincent ;)

   
Répondre à Vincent

10

Mimiste, le 5 sep 2008 à 10:32:11

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> La sportivité commence là où le diesel s'arrête !
You can still watch this ? Wait until the Vtec kick in !

   
Répondre à Mimiste

11

Vincent, le 5 sep 2008 à 10:35:14
  • +1

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

   
Répondre à Vincent

12

Mimiste, le 5 sep 2008 à 10:44:16

Ben en 2 secondes je dirai en mettant le css sur chaque tr

<tr style="display:none;">
La sportivité commence là où le diesel s'arrête !
You can still watch this ? Wait until the Vtec kick in !

   
Répondre à Mimiste

13

 Vincent, le 5 sep 2008 à 11:08:13

Simple mais efficace !

Grand merci à toi Mimiste !!!!!!!!!!!!!!!!!!!!

   
Répondre à Vincent
Posez votre question Répondre
Ils ont besoin de votre aide
Collection CommentÇaMarche.net