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

**beegees** · 03/04/2008, 09h49

Bonjour tout le monde,

J'ai un tableau que voici :

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

d'avance.

beegees

**chrosnir** · 03/04/2008, 10h04

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 :

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

**htr999** · 03/04/2008, 10h09

un exemple

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

**beegees** · 03/04/2008, 10h54

Envoyé par htr999

un exemple

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

**beegees** · 03/04/2008, 10h17

Bonjour chrosnir,

Merci pour ta réponse.

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

Code :

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

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

**chrosnir** · 03/04/2008, 10h36

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.

**beegees** · 03/04/2008, 10h51

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 :

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

) 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

**chrosnir** · 03/04/2008, 11h02

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

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

JavaScript

Vue hybride

Discussions similaires

Partager

Partager