Discussion :

[Alexandrebox]

Bonjour,

J'ai une table dans un formulaire qui contient des inputs pour 4 langues.

J'aimerais proposer des liens (français, anlgais, allemand, italien)

Lorsque je clique sur "français"
Les données en français s'affichent. Les autres données restent invisibles.

<tr>ici données en français</tr>

Si je clique sur "anglais"
Les données en anglais s'affichent. Les autres données restent invisibles.

<tr>ici données en anglais</tr>

ainsi de suite. Pourriez-vous m'aider SVP ?

Voici mon code

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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<form action="" method="post">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="matable">
 
<!--Les titres sur lesquels on vas cliquer pour afficher ou cacher la donnée-->
<tr>
<td height="18" colspan="2" valign="top" class="matableTd">Fran&ccedil;ais | Anglais | Allemand | Italien </td>
</tr>
 
 <!--Donnée en français. à afficher si cette donnée est active-->
<tr>
<td width="30%" height="18" valign="top" class="matableTd">Titre en fran Fran&ccedil;ais</td>
<td width="70%" valign="top" class="matableTdElement"><label>
<input name="titre_fr" type="text" id="titre_fr" size="60">
</label></td>
</tr>
 
<tr>
<td height="18" valign="middle" class="matableTd">Texte</td>
<td valign="top" class="matableTdElement"><label>
<textarea name="texte_fr" cols="92" rows="20" id="texte_fr"></textarea>
</label></td>
</tr>
 
 <!--Donnée en anglais. à afficher si cette donnée est active-->
<tr>
<td width="30%" height="18" valign="top" class="matableTd">Titre en anglais</td>
<td width="70%" valign="top" class="matableTdElement"><label>
<input name="titre_en" type="text" id="titre_en" size="60">
</label></td>
</tr>
 
<tr>
<td height="18" valign="middle" class="matableTd">Texte</td>
<td valign="top" class="matableTdElement"><label>
<textarea name="texte_en" cols="92" rows="20" id="texte_en"></textarea>
</label></td>
</tr>
 
 <!--Donnée en allemand. à afficher si cette donnée est active-->
<tr>
<td width="30%" height="18" valign="top" class="matableTd">Titre en Allemand</td>
<td width="70%" valign="top" class="matableTdElement"><label>
<input name="titre_de" type="text" id="titre_de" size="60">
</label></td>
</tr>
 
<tr>
<td height="18" valign="middle" class="matableTd">Texte</td>
<td valign="top" class="matableTdElement"><label>
<textarea name="texte_de" cols="92" rows="20" id="texte_de"></textarea>
</label></td>
</tr>
 
 <!--Donnée en italien. à afficher si cette donnée est active-->
<tr>
<td width="30%" height="18" valign="top" class="matableTd">Titre en Allemand</td>
<td width="70%" valign="top" class="matableTdElement"><label>
<input name="titre_it" type="text" id="titre_it" size="60">
</label></td>
</tr>
 
<tr>
<td height="18" valign="middle" class="matableTd">Texte</td>
<td valign="top" class="matableTdElement"><label>
<textarea name="texte_it" cols="92" rows="20" id="texte_it"></textarea>
</label></td>
</tr>
 
</table>
</form>

D'avance je vous remercie beaucoup

[Halleck]

tu attribue un id unique aux tr

tu crée une fonction en javascript (ça se trouve facilement, ou en voici une rapide:

Code javascript :

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

1
2
3
function affichdiv(id,visibilite) {
	document.getElementById(id).style.display = visibilite;
}

après, sur tes liens (français, allemand...) :

Code html :

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

1
2
 
<a href="#" onclick:"affichdiv('id_fr','block';affichdiv('id_ang','none'; ... etc. ">Français</a>

et pour le contenu :

Code html :

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

1
2
3
4
 
<tr id="id_fr">Tout ce que tu veux pour le texte français</tr>
<tr id="id_ang">Tout ce que tu veux pour le texte anglais</tr>
...

Maintenant, perso à la place des tr je ferai des div (auxquelles donc j'attribuerai un id unique)

Vouli voulou

[Alexandrebox]

Bonjour merci pour ton aide, mais toute cette partie du code n'est pas clair pour moi. Parce que tu as mis etc. et je ne comprends rien. Les autres parties sont claire.

Code :

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

<a href="#" onclick:"affichdiv('id_fr','block');affichdiv('id_en','none');

Je n'ai pas vraiment compris comment faire

D'avance merci beaucoup

[Halleck]

En fait, à chaque click sur le lien, on exécute une fonction javascript, créée plus haut, nommée affichdiv.

Cette fonction change le style de la div à laquelle elle s'applique, et plus précisément la propriété display.

C'est comme si on faisait un style:

Code :

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

1
2
.cache { display:none; }
.visible [ display:block; }

Donc, pour la fonction, le premier paramètre est l'id de l'élément dont on va changer la propriété display, le deuxième est la valeur de cette propriété (block pour rendre visible, non pour cacher)

En espérant avoir été clair, bon courage

[Erwan31]

Bonjour,
attention le display:block n'est pas le display par default des TR.
Son application peut provoquer un comportements des TR inattendu.

Il vaut mieux attribuer un display:table-row aux TR pour les navigateurs
alternatifs et un display:block sur IE qui n'implemente pas encore la valeur table-row.

[Alexandrebox]

Merci Erwan32.
Peux-tu me donner un exemple à partir de mon code stp?
Je ne comprends pas vraiment et ne sais pas comment faire.

Merci d'avance à tous