Cacher un tableau par le clic d'un lien et le faire réaparaitre avec un autre clic

Version imprimable

Bonjour tout le monde,

J'ai un tableau que voici :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<table width="637" border="1  " align="left" >
    <tr>
      <td width="284" rowspan="2"><div align="center" class="Style3">Matricule <span class="Style11">(6 premiers chiffres)</span> </div></td>
      <td width="337"><div align="center" class="Style14">Mot de passe oubli&eacute; ou nouvelle connexion ? </div></td>
    </tr>
    <tr>
      <td><div align="center"><strong>
          <input name="txtlogin" type="text" id="txtlogin" />
      </strong></div></td>
    </tr>
    <tr>
      <td width="284"><div align="center" class="Style3">Vos identifiants vous seront envoy&eacute; &agrave; cette adresse email </div></td>
      <td><div align="center"><strong>
        <input name="txtlogin3" type="text" id="txtlogin3" disabled="disabled" />
      </strong></div></td>
    </tr>
    <tr>
      <td width="284"><div align="center"><span class="Style6"><a href="../NewPassword/NewPasswordMF1stStep.html">changer votre mot de passe</a></span> | <span class="Style6"><a href="../Howtouse/HowToUseAuthentification.html">mode d'emploi de ce site </a></span></div></td>
      <td><div align="center"><strong>
        <input type="submit" name="Submit2" value="Obtenir ses identifiants" target = "_blank" />
      </strong></div></td>
    </tr>
  </table>

J'aimerais via un simple lien l'afficher.

Cela voudrait donc dire qu'au départ il serait caché.

Donc un clic sur le lien affiche le tableau dans la même page, un clic à nouveau le cache.

Je présûme que s'est possible avec Javascript ?

Un super grand :merci: d'avance.

beegees

Et bien c'est assez simple, tu met ton tableau dans un div, et tu lui met on attribut display.

Ensuite tu créer un bouton qui fasse apparaitre ou disparaitre le tableau en changeant l'attribut du display (block: tableau visible, none: invisible)

Voici la forme:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 <div id='contain_tab_1' style='display:none'> //A mettre dans le body <table id='tab_1'> ... </table> </div> <input type='button' value='cacher_tab' id='bouton1' onClick='cacher_tab_1()'> <input type='button' value='afficher_tab' id='bouton2' onClick='afficher_tab_1()'> <script type='text/javascript'> //A mettre dans le head function afficher_tab_1() { document.getElementById('contain_tab_1').style.display='block'; } function cacher_tab_1() { document.getElementById('contain_tab_1').style.display='none'; } </script>
Voilà ;)

un exemple

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<head>
<script>
function cache(id)
{
	elemTable = document.getElementById(id);
	elemTable.style.visibility = (elemTable.style.visibility == "hidden")? "visible":"hidden";
 
	elemLien = document.getElementById("lien");
	elemLien.innerHTML = (elemTable.style.visibility == "hidden")? "Montrer":"Cacher";
}
</script>
</head>
<body>
<a id='lien' href="#" onClick="cache('table1')">Montrer</a>
 
<table id='table1' border=1 style="visibility: hidden;">
	<tr colspan=3>
		<td>a</td>
		<td>b</td>
		<td>c</td>
	</tr>
</table>
</body>

sorry chrosnir je poste en même temps !.!

03/04/2008, 10h17
beegees
Bonjour chrosnir,

Merci pour ta réponse.

Que dois-mettre dans les propriétés du DIV de mon tableau ?
Code:

1 2 3 <div> <form> <table width="637" border="1 " align="left" > <tr>
Je te dirais quoi qaund j'aurai fini le test complet.

Encore merci.

beegees
03/04/2008, 10h36
chrosnir

Dans le div ou dans le tableau?

Tu peux mettre ce que tu veux id, name, style. Par contre la position tu la reglera dans le style du div et non dans le style du tableau.

Citation:

Envoyé par chrosnir

Dans le div ou dans le tableau?

Tu peux mettre ce que tu veux id, name, style. Par contre la position tu la reglera dans le style du div et non dans le style du tableau.

Excuse mon ignorance.

Voici ce que j'ai fais :

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
<div style="...."> <form>
  <table width="637" border="1  " align="left" >
    <tr>
      <td width="284" rowspan="2"><div align="center" class="Style3">Matricule <span class="Style11">(6 premiers chiffres)</span> </div></td>
      <td width="337"><div align="center" class="Style14">Mot de passe oubli&eacute; ou nouvelle connexion ? </div></td>
    </tr>
    <tr>
      <td><div align="center"><strong>
          <input name="txtlogin" type="text" id="txtlogin" />
      </strong></div></td>
    </tr>
    <tr>
      <td width="284"><div align="center" class="Style3">Vos identifiants vous seront envoy&eacute; &agrave; cette adresse email </div></td>
      <td><div align="center"><strong>
        <input name="txtlogin3" type="text" id="txtlogin3" disabled="disabled" />
      </strong></div></td>
    </tr>
    <tr>
      <td width="284"><div align="center"><span class="Style6"><a href="../NewPassword/NewPasswordMF1stStep.html">changer votre mot de passe</a></span> | <span class="Style6"><a href="../Howtouse/HowToUseAuthentification.html">mode d'emploi de ce site </a></span></div></td>
      <td><div align="center"><strong>
        <input type="submit" name="Submit2" value="Obtenir ses identifiants" target = "_blank" />
      </strong></div></td>
    </tr>
  </table></form> </div>

Saurais-tu (j'espère ne pas trop exagéré :oops:) complété les .... qui se trouve dans le code ci-dessus ? Il n'y a qu'une seule position ? et ce par rapport au code que tu m'as donné ?

Merci d'avance.

beegees

Citation:
Envoyé par htr999
un exemple
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 <head> <script> function cache(id) { elemTable = document.getElementById(id); elemTable.style.visibility = (elemTable.style.visibility == "hidden")? "visible":"hidden"; elemLien = document.getElementById("lien"); elemLien.innerHTML = (elemTable.style.visibility == "hidden")? "Montrer":"Cacher"; } </script> </head> <body> <a id='lien' href="#" onClick="cache('table1')">Montrer</a> <table id='table1' border=1 style="visibility: hidden;"> <tr colspan=3> <td>a</td> <td>b</td> <td>c</td> </tr> </table> </body>
sorry chrosnir je poste en même temps !.!
Bonjour htr999,

Je viens de tester ton code, il est très efficace avec ton exemple, merci.

[Edit] Très effice, je confirme, le seul hic (pour l'instant) s'est qu'il affiche le tableau lorsque la page s'ouvre alors qu'il ne devrait pas, je vais chercher, superbe code, merci encore !

Encore un grand merci à toi.

beegees

03/04/2008, 11h02
chrosnir

Voilà 1 exemple de ce que tu peux mettre dans ton div, mais après tu as des dizaines de possibilités. Tout dépend de ce que tu veux faire.

<div id='contain_tab_1' style='position: absolute; top: 200px; left: 200px;width:75%; height:350px; border: 1px solid;' style='display:block'>

Tu remarquera que j'ai défini:
-l'id du div que tu devra entrer dans le getElementById du script pour faire apparaitre au disparaitre le tableau.
-la position en absolute (se met au premier plan sur la page)
-l'emplacement du div en pixels par rapport au haut de la page (top) et par rapport au coté gauche de la page (left)
-la hauteur et la largeur du div (que tu peux regler en px ou en poucentage de la page pour n'importe lequel des 2)
-j'ai mis 1 cadre autour de 1px
-et enfin j'ai reglé le display pour qu'il apparaisse au chargement de la page

Voilà j'éspère que mon exemple te sera utile :)
03/04/2008, 11h19
beegees

Citation:

Envoyé par chrosnir

Voilà 1 exemple de ce que tu peux mettre dans ton div, mais après tu as des dizaines de possibilités. Tout dépend de ce que tu veux faire.

<div id='contain_tab_1' style='position: absolute; top: 200px; left: 200px;width:75%; height:350px; border: 1px solid;' style='display:block'>

Tu remarquera que j'ai défini:
-l'id du div que tu devra entrer dans le getElementById du script pour faire apparaitre au disparaitre le tableau.
-la position en absolute (se met au premier plan sur la page)
-l'emplacement du div en pixels par rapport au haut de la page (top) et par rapport au coté gauche de la page (left)
-la hauteur et la largeur du div (que tu peux regler en px ou en poucentage de la page pour n'importe lequel des 2)
-j'ai mis 1 cadre autour de 1px
-et enfin j'ai reglé le display pour qu'il apparaisse au chargement de la page

Voilà j'éspère que mon exemple te sera utile :)

Merci beaucoup pour le temps que tu as passé sur cette réponse.

Le code de htr999 est vraiment adapté à ce que j'ai besoin.

et en plus ça fonctionne maintenant, j'avais juste oublier de mettre le stype hidden.

Un super grand merci à vous deux.

Problème :resolu:

beegees