Problème avec un div qui n'est pas pris en compte

**boss_gama** · 24/07/2006, 12h24

Salut, j'utilise un tableau dans lequel je veux afficher soit une serie de cellules, soit une autre. pour cela j'utilise la propriété display et visibility. Mon code marche quand j'enlève les lignes <table> et </table>, mais si je les mets mes <div> ne sont plus pris en compte.
L'option div ne marche pas avec lese tableau?

**riccco** · 24/07/2006, 12h47

on reformule la question pour plus de clarté svp ...

ricco

**boss_gama** · 24/07/2006, 14h03

je reformule :

j'ai un code de la forme:

Code :

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

1
2
3
4
5
6
7
 
<table>
     <tr>
     </tr>
     <tr>
     </tr>
</table>

et je voudrais pouvoir afficher soit le premier tr soit le deuxieme. L'affichage se gère via l'option visibility et via l'option display, toute deux associées à css, donc avec l'utilisation de <div>
Un code simple du style:

Code :

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

1
2
3
4
5
6
7
 
<div id="tout">
     tout
</div>
<div id="rien">
     rien
</div>

s'affiche correctement, donc ma fonction javascript est correcte, au moins sur le principe, mais quand je l'applique à mon tableau ca ne marche plus.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
<table>
     <div id="tout">
          <tr>
          </tr>
     </div>
     <div id="rien">
          <tr>
          </tr>
      </div>
</table>

D'après le résultat, il me semble que div ne s'applique sur le tableau. Est-ce une erreur dans ma fonction javascript, ou une contrainte de html?

**riccco** · 24/07/2006, 14h10

Salut,

est-ce que tu utilises 'getElementById' ?

car tu peux utiliser cette syntaxe :

document.getElementById('maDiv).style.display=document.getElementById('maDiv').style.display=='inline' ? 'none' : 'inline';

ricco

**boss_gama** · 24/07/2006, 14h15

oui c'est ce que j'utilise. sur un code simple ca marche, mais si je veux l'inclure à mon tableau ca ne marche pas

.
La dans le doute je viens d'essayer de considerer chaque bloc div comme un tableau. Ca 'marchouille', mais j'ai des bugs d'affichage et pour l'instant je sais pas comment les regler

. Je continue a chercher

**boss_gama** · 24/07/2006, 14h22

dans le doute je poste mon code actuel complet:

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
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
<html>
	<head>
		<link href="style.css" rel="stylesheet" type="text/css">
	</head>
	<script>
 
		function afficher(baliseaff,calisecach)
			{
					    document.getElementById(baliseaff).style.visibility='visible';
					    document.getElementById(baliseaff).style.display='block';
 
						document.getElementById(calisecach).style.visibility='hidden';
						document.getElementById(calisecach).style.display='none';
 
			}
	</script>
 
	<body>
		<table border="0" cellspacing="0" cellpadding="0">
			<tr>
				<td align="left" colspan="8">
					<img border="0" onclick="aller(0, -1, 'fiche.asp')" src="images/client.ico">
				</td>
			</tr>
			<tr>
				<td align="left" valign="bottom" colspan="8">
					<img border="0" src="images/traitvert.jpg">
				</td>
			</tr>
		</table>
 
		<div id="tout">
			<table border="0" cellspacing="0" cellpadding="0">
				<tr>
					<td align="left" valign="top">
						<input type="image" name='tout' border="0" onclick="afficher('rien','tout')" src="images/deselection.jpg">
					</td>
					<td align="left">
						<img border="0" src="images/traithoriz.jpg">
					</td>
					<td align="left" colspan="6">
						<img border="0" src="images/web.ico">
					</td>
				</tr>
			</table>
		</div>
 
		<div id="tout_web">
			<table border="0" cellspacing="0" cellpadding="0">
				<tr>
					<td align="left">
						<img border="0" src="images/traitvert.jpg">
					</td>
					<td align="left" width="32">
					</td>
					<td align="left" width="32">
						<img border="0" onclick="afficher('rien_web','tout_web')" src="images/deselection_coin.jpg">
					</td>
					<td align="left">
						<img border="0" src="images/traithoriz.jpg">
					</td>
					<td align="left" colspan="4">
						<img border="0" onclick="aller(1, -1, 'fiche_web.asp')" src="images/infos.gif">
					</td>
				</tr>
			</table>
		</div>
 
		<div id="rien_web">
			<table border="0" cellspacing="0" cellpadding="0">
				<tr>
					<td align="left">
						<img border="0" src="images/traitvert.jpg">
					</td>
					<td align="left" width="32">
					</td>
					<td align="left" width="32" colspan="5">
						<img border="0" onclick="afficher('tout_web','rien_web')" src="images/selection.jpg">
					</td>
				</tr>
			</table>
		</div>
		<div id="tout">
			<table border="0" cellspacing="0" cellpadding="0">
				<tr>
					<td align="left">
						<img border="0" src="images/carrefour.jpg">
					</td>
					<td align="left">
						<img border="0" src="images/traithoriz.jpg">
					</td>
					<td align="left" colspan="5">
						<img border="0" onclick="aller(2, -1, 'fiche.asp')"  src="images/serveur.ico">
					</td>
				</tr>
				<tr>
						<td align="left">
						<img border="0" src="images/traitvert.jpg">
						</td>
				<td align="left" width="32">
				</td>
					<td align="left" width="32" colspan="6">
						<img border="0" onclick="afficher(2, 'non',-1,'non')" src="images/selection.jpg">
					</td>
				</tr>
				<tr>
					<td align="left">
						<img border="0" src="images/coin.jpg">
					</td>
					<td align="left">
						<img border="0" src="images/traithoriz.jpg">
					</td>
					<td align="left" colspan="6">
						<img border="0" onclick="aller(3, -1, 'fiche.asp')"  src="images/parc.ico">
					</td>
				</tr>
				<tr>
					<td align="left">
					</td>
					<td align="left" width="32">
					</td>
					<td align="left" width="32" colspan="6">
						<img border="0" src="images/selection.jpg">
					</td>
				</tr>
			</table>
		</div>
 
		<div id="rien">
			<table border="0" cellspacing="0" cellpadding="0">
				<tr>
					<td align="left" valign="top" colspan="3" colspan="8">
						<img border="0" onclick="afficher('tout','rien')" src="images/selection.jpg">
					</td>
				</tr>
			</table>
		</div>
 
	</body>
	<script>
		afficher('rien','tout');
	</script>
</html>

Le problème de ce code, c'est que le resultat ne cache que un des 3 éléments que je veux cacher. Je pourrais forcer les autres éléments à se cacher en mettant un nom différent, mais comme je vais avoir des éléments qui vont apparaitre de manière dynamique ultèrieurement, ca ne marcherait pas à la fin. il faut donc que je trouve une autre solution...

**Auteur** · 24/07/2006, 16h27

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
<table>
     <div id="tout">
          <tr>
          </tr>
     </div>
     <div id="rien">
          <tr>
          </tr>
      </div>
</table>

hooooo ce code

qu'il est vilain !

Pour afficher / masquer des cellules ou des lignes :

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
 
<html>
<head>
<title></title>
 
<script type="text/javascript">
<!--
function CacheLigne()
{
 var eTab = document.getElementById("tab")
 eTab.rows[1].style.display="none";
}
function MontreLigne()
{
 var eTab = document.getElementById("tab")
 eTab.rows[1].style.display="";
}
//-->
</script>
 
</head>
 
<body>
<table id="tab" border="1">
  <tr>
    <td>ligne 1
    </td>
  </tr>
  <tr>
    <td>ligne 2
    </td>
  </tr>
  <tr>
    <td>ligne 3
    </td>
  </tr>
</table>
<input type="button" value="Cache" id="BNom" onclick="CacheLigne()">
<input type="button" value="Montre" id="BNom" onclick="MontreLigne()">
 
</body>
 
</html>

[/code]

**SpaceFrog** · 24/07/2006, 16h41

mets le id sur les tr ou td directement ...
il ne faut pas imbriquer des div dans une structutre de table ...

**boss_gama** · 25/07/2006, 08h54

hum, auteur la solution que tu donnes ressemble à la mienne, sauf que tu mets l'id dans le tag table et non div. non?

Cela dit mettre l'id dans les tr comme le dit spacefrog est une bonne idée.
Je vais tester ca tout de suite.

**Auteur** · 25/07/2006, 11h02

Dans le premier code que tu as posté tu as encadré tes tr par des div...
Je te propose donc d'utiliser les fonctions suivantes pour masquer ou afficher une ligne. J'utilise le tableau rows[] de l'objet table.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
function CacheLigne()
{
 var eTab = document.getElementById("tab")
 eTab.rows[1].style.display="none";
}
function MontreLigne()
{
 var eTab = document.getElementById("tab")
 eTab.rows[1].style.display="";
}

je sélectionne id de la table puis un numéro de ligne. Spacefrog te propose de sélectionner directement l'id de la ligne (tr).