Discussion :

[mLk92]

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 :

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

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 html :

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

[denisC]

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

[mLk92]

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

Que me proposes-tu ?

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

[mLk92]

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

En effet on peut faire ceci :

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

Merci quand mm !!

Du coup j'ai ceci en javascript :

Code :

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

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

[denisC]

Que me proposes-tu ?

Le tbody

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 :

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

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

Edit : Damn trop lent :/