Afficher/Masquer des lignes de tableaux

Version imprimable

Hi all,

Je suis débutant en javascript et j'ai tenté de faire un pti de soit disant "AJAX" ;), Donc j'ai un tableau de 10 lignes sans compter la ligne de titre, et je voudrais tout simplement Afficher ou Masquer ces lignes en cliquant sur un même liens.

J'avais déja fait ça sur un bloc et cela fonctionnait impeccablement, mais là il s'agit de lignes donc rien ne vas plus !!

J'ai cherché un peu sur le forum et testé ceci :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
function visibilite(10){
	var i= 1;
	while(i <= 10){
		var targetElement = document.getElementById("blockToHide"+i);
		if(targetElement.style.display == "none"){
			targetElement.style.display = "";
			document.getElementById('linkHide').innerHTML = 'Masquer Caractéristiques';
		}else{
			targetElement.style.display = "none";
			document.getElementById('linkHide').innerHTML = 'Afficher Caractéristiques';
		}
	}
}

code html :

Code:

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
41
42
43
44
45
<table border="1" cellspacing="0" cellpadding="0">
	<tr> <!-- Lien pour afficher ou masquer -->	
                         <td colspan="2"><a href="javascript:visibilite('10');" title="Cacher les lignes " id="linkHide">Afficher Caract&eacute;ristiques</a></td>
             </tr><!-- Lignes à afficher-->
             <tr id="blockToHide1" style="display:none">
		<td colspan="2">Type</td>
		<td width="195"></td>
	</tr>
	<tr id="blockToHide2" style="display:none">
		<td colspan="2">Pays</td>
		<td width="195"></td>
	</tr>
	<tr id="blockToHide3" style="display:none">
		<td colspan="2">Fin Com</td>
		<td width="195"></td>
	</tr>
	<tr id="blockToHide4" style="display:none">
		<td colspan="2">Puissance</td>
		<td width="195"></td>
	</tr>
	<tr id="blockToHide5" style="display:none">
		<td colspan="2">Cylindr&eacute;e</td>
		<td width="195"></td>
	</tr>
	<tr id="blockToHide6" style="display:none">
		<td colspan="2">Conso Mixte</td>
		<td width="195"></td>
	</tr>
             <tr id="blockToHide7" style="display:none">
		<td colspan="2">Conso Mixte</td>
		<td width="195"></td>
	</tr>
	<tr id="blockToHide8" style="display:none">
		<td colspan="2">Conso CO2</td>
		<td width="195"></td>
	 </tr>
	<tr id="blockToHide9" style="display:none">
		<td colspan="2">Pneu</td>
		<td width="195"></td>
	</tr>								<tr id="blockToHide10" style="display:none">
			<td colspan="2">Prix</td>
			<td width="195"></td>
	</tr>
</table>

Là rien ne s'affiche, j'ai bien tout de masquer au départ, mais en cliquant rien n'apparait :? Auriez vous une idée ?

Merci pour vos réponses !! :P

11/10/2007, 17h37
denisC

Citation:

Envoyé par mLk92

Là rien ne s'affiche, j'ai bien tout de masquer au départ, mais en cliquant rien n'apparait :? Auriez vous une idée ?

Ta méthode visible est bonne (enfin, elle devrait marcher, elle est pas terrible).
Par contre, pourquoi lui mettre un argument? Tu déclare function visibilite(10) et ça, ça doit pas être autorisé.... Vire cet argument partout (de toute façon, il ne sert à rien).

Sinon, pour rendre ça plus propre, j'aurais utilisé un tbody pour rassembler toutes tes lignes et il ne te reste plus qu'à faire apparaitre/disparaitre ton tbody.

Troll : Y'a rien d'Ajax là dedans
11/10/2007, 17h58
mLk92

Citation:

Envoyé par denisC

Ta méthode visible est bonne (enfin, elle devrait marcher, elle est pas terrible).

Que me proposes-tu ?

Citation:

Envoyé par denisC

Sinon, pour rendre ça plus propre, j'aurais utilisé un tbody pour rassembler toutes tes lignes et il ne te reste plus qu'à faire apparaitre/disparaitre ton tbody.

Troll : Y'a rien d'Ajax là dedans

C'est la méthode que j'utilisait auparavant mais la configuration du tableau fait que je ne peux plus ^^, effectivement il y a deux lignes dans mon tableau (que je n'ai pas écrit dans ce code) qui ne doivent pas ce cacher, ainsi le tbody devient malheureusement obsolète :(

Je ne sais pas si je peux rajouter un tr après un tbody, je vais chercher mais j'ai jamais vu !

Je vais aussi tester le visibilite() sans argument :p

Mea Culpa, trop de questions pour pas grand chose, il me suffisait de changer de structure html :)

En effet on peut faire ceci :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 <table> <thead> <tr> <td></td> </tr> </thead> <tbody> <tr> <td></td> </tr> </tbody> <tbody> <tr> <td></td> </tr> </tbody>
Ce que je ne savais pas !!

Donc j'ai pris le premier tbody comme bloc à cacher et basta :king:

Merci quand mm !!

Du coup j'ai ceci en javascript :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 function visibilite(thingId) { var targetElement; targetElement = document.getElementById(thingId) ; if (targetElement.style.display == "none"){ targetElement.style.display = "" ; document.getElementById('linkHide').innerHTML='Masquer Caractéristiques'; } else { targetElement.style.display = "none" ; document.getElementById('linkHide').innerHTML='Afficher Caratéristiques'; } }
Ciao !!

11/10/2007, 18h28
denisC

Citation:

Envoyé par mLk92

Que me proposes-tu ?

Le tbody :)

Citation:

Envoyé par mLk92

Je ne sais pas si je peux rajouter un tr après un tbody, je vais chercher mais j'ai jamais vu !

Tu peux mettre autant de tbody que tu veux dans ton tableau. Après ce tbody, mets en un deuxième avec tes lignes supplémentaires...

http://www.w3.org/TR/html401/struct/....html#h-11.2.1 :

Citation:

<!ELEMENT TABLE - -
(CAPTION?, (COL*|COLGROUP*), THEAD?, TFOOT?, TBODY+)>

TBODY + signifie 1 à n tbody dans la table....

Edit : Damn trop lent :/