display none ou block multiple

**riete** · 03/07/2008, 18h10

J'ai un tableau qui contient un très grand nombre de cases. Pour améliorer la lisibilité j'ai fixé la propriété de style display:none; (invisible) pour un certain type de case qui ont toutes un id identique: id='payed'.

A l'aide d'un bouton je déclenche un fonction JS qui devrait les faire tous disparaître ou apparaître. Sauf que la fonction n'agit que sur la dernière case.

Pourquoi ? merci de votre aide.
Voici un exemple de mon code très simplifié.

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
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<html>
<head>
	<style type="text/css" title="text/css">
	td{		border-color: #DDD;
			background-color: #39F;
			width: 50;
			border-style: solid;
			border-color: #555;
			border-width: 2px;}
	</style>
</head>
 
<script type="text/javascript">
function Show_Hide(objID) {
		var obj = document.getElementById(objID);
 
		if (obj.style.display=='block') {
			obj.style.display='none';
		} else {
			obj.style.display='block';
		}
	}
</script>
<body>
<div  onclick="Show_Hide('paye');">Voir/Cacher</div>
<table>
	<tr>
		<td id=paye>&nbsp</td>
		<td id=paye>&nbsp</td>
		<td id=paye>&nbsp</td>
	</tr>
</table>
</body>
</html>

**E.Bzz** · 03/07/2008, 18h11

Bonjour,

Envoyé par riete

J'ai un tableau qui contient un très grand nombre de cases. Pour améliorer la lisibilité j'ai fixé la propriété de style display:none; (invisible) pour un certain type de case qui ont toutes un id identique: id='payed'.

Je n'ai pas lu plus loin : c'est interdit

(un id doit être unique dans la page)

A+

**htr999** · 03/07/2008, 22h26

+1 pour l'id UNIQUE

sinon note les éléments dont tu aura besoin avec les id comme par l'exemple "id1...id100"
et dans ta fonction tu fais une simple boucle pour les afficher !.!
sinon il y a aussi getElementsByTagName

a+

**riete** · 04/07/2008, 08h47

Envoyé par E.Bzz

Bonjour,
Je n'ai pas lu plus loin : c'est interdit

(un id doit être unique dans la page)

Vu le comportement du navigateur, je me doutais bien que je n'arriverais pas à le blouser

Merci htr999 pour l'info, même si j'ai déjà utiliser à de nombreuses occasions cette méthode. Mais vu que dans ma page j'ai 6200 cases à cacher ou a faire apparaitre, je voulais éviter d'effriter les performances avec une boucle. Grave erreur de ma part, j'ai fait l'essai c'est super rapide (chapeau JS !).

J'ai une autre question:Comment puis je connaitre la valeur max de l'index sachant que ma page est construite avec du php et que je ne connais sa valeur qu'a la fin de la génération ?

Vous me suivez?

Existe t il un moyen plus rapide que de reparcourir toute la page pour trouver la plus grande valeur de l'index 'n', avant de lancer Show_Hide(n) ?

J'ai pensé mettre le bouton de déclenchement en bas de page, mais bof

Comme support, je poste le code échantillon qui fonctionne avec un index fixe.

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
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<html>
<head>
	<style type="text/css" title="text/css">
	td{		border-color: #DDD;
			background-color: #39F;
			width: 50;
			border-style: solid;
			border-color: #555;
			border-width: 2px;}
	</style>
</head>
 
<script type="text/javascript">
function Show_Hide(n) {
 
	for ( x =1 ; x <= n ; x++){
 
		var obj = document.getElementById("paye" + x);
 
			if (obj.style.display=='block') {
				// Affiche
				obj.style.display='none';
			} else {
				// Cache
				obj.style.display='block';
			}
	}
}
</script>
<body>
<div  onclick="Show_Hide(3);">Voir/Cacher</div>
<table>
	<tr>
		<td id=paye1>&nbsp</td>
		<td id=paye2>&nbsp</td>
		<td id=paye3>&nbsp</td>
	</tr>
</table>
</body>
</html>

**E.Bzz** · 04/07/2008, 09h19

Envoyé par riete

Existe t il un moyen plus rapide que de reparcourir toute la page pour trouver la plus grande valeur de l'index 'n', avant de lancer Show_Hide(n) ?

Ces index sont générés par le serveur (PHP, ASP ...), je suppose ?
Il te suffit de mémoriser la dernière valeur à ce niveau, et de la stocker dans la page (variable JS, input hidden ...)

A+

**Thes32** · 04/07/2008, 09h42

Envoyé par riete

...je ne connais sa valeur qu'a la fin de la génération ?

oui, effectivement ensuite du côté serveur avec php

Envoyé par E.Bzz

Il te suffit de mémoriser la dernière valeur à ce niveau, et de la stocker dans la page (variable JS, input hidden ...)

**riete** · 04/07/2008, 10h02

Envoyé par E.Bzz

Ces index sont générés par le serveur (PHP, ASP ...), je suppose ?
Il te suffit de mémoriser la dernière valeur à ce niveau, et de la stocker dans la page (variable JS, input hidden ...)

A+

Ceci m'aura permis de mieux comprendre la visibilité des variable JS. Le input hidden n'est pas nécessaire puisqu'il n'y a pas formulaire.
J'ai mis en fin de code l'affectation de la valeur de l'index max et ça gaz!

Code :

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

echo "<script>var max_Index=".$Index_Cell.";</script>";

merci en tout cas

A+

display none ou block multiple

JavaScript

Discussions similaires

Partager

Partager