Tableau depliable jquery

**boo64** · 08/07/2009, 17h32

Bonjour à tous

j'ai fais un petit tableau qui si on clique sur une ligne permet d'afficher des lignes cachés et si on clique sur les colonnes des mois cela permet de "deplier" les jours

Mon soucis est que si on deplie les mois puis les lignes tout se passe bien
mais par contre si on déplie les mois puis les replient et qu'on deplie une ligne la ligne caché n'a pas ses mois repliés (

dur à expliquer)

voici un exemple testé sous ie qui montre le soucis

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
<style type="text/css">
table {
	border: 1px solid #403b33;
	border-collapse: collapse;
	margin-top:2%;
}
 
table thead tr th {
	border: 1px solid #403b33;
	font-weight: normal;
	text-align: center;
	background-color:#403b33; 
	color:white;
}
 
table tbody tr td {
 
	border: 1px solid #403b33;
	padding: 3px;
 
}
.parent{
	cursor: pointer;
	color: #FF6600;
	font-weight:bold;
}
 
.mois{
cursor: pointer;
font-weight:bold; 
}
.child{
	color:#403b33;
	display: none;
	font-weight: normal;
	text-align: center;
	cursor: default;
}
.hidden{
	display: none;
}
.col{
	font-weight: bold; 
	color:#403b33;
}
</style>
<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript">
		$(document).ready(function () {
			$('.parent').click(function(){
				$('.'+$(this).attr("id")).toggle();
			});
			$('.mois').click(function(){
				$('.'+$(this).attr("id")).toggle();
			});			
		});
</script>
<div id="tab"><table>
<thead>
	<th> en % </th><th id="04" class="hidden 04">01</th><th id="05" class="hidden 05">27</th><th id="05" class="hidden 05">28</th><th id="05" class="hidden 05">29</th><th id="05" class="hidden 05">31</th><th id="05" class="mois">May</th><th id="06" class="hidden 06">04</th><th id="06" class="hidden 06">05</th><th id="06" class="hidden 06">08</th><th id="06" class="hidden 06">09</th><th id="06" class="hidden 06">10</th><th id="06" class="hidden 06">25</th><th id="06" class="hidden 06">26</th><th id="06" class="hidden 06">29</th><th id="06" class="hidden 06">30</th><th id="06" class="mois">Jun</th><th id="07" class="mois">01</th><th id="07" class="mois">02</th><th id="07" class="mois">08</th>
</thead>
<tbody>
	<tr id="_SO" class="parent"><td class="col">_SO</td>
	<td  class="hidden 04">85.53</td><td  class="hidden 05">85.51</td><td  class="hidden 05">85.51</td><td  class="hidden 05">85.51</td><td  class="hidden 05">85.52</td><td class="mois">85.52</td><td  class="hidden 06">85.52</td><td  class="hidden 06">85.52</td><td  class="hidden 06">85.52</td><td  class="hidden 06">85.52</td><td  class="hidden 06">85.52</td><td  class="hidden 06">85.54</td><td  class="hidden 06">85.54</td><td  class="hidden 06">85.58</td><td  class="hidden 06">85.58</td><td class="mois">85.58</td><td  class="mois">85.58</td><td  class="mois">85.58</td><td  class="mois">85.94</td>
	</tr>
	<tr id="B2" class="_SO child"><td class="col"> |- B2</td>
	<td class="hidden 04">84.95</td><td class="hidden 05">84.94</td><td class="hidden 05">84.94</td><td class="hidden 05">84.94</td><td class="hidden 05">84.94</td><td class="mois">84.94</td><td class="hidden 06">84.94</td><td class="hidden 06">84.94</td><td class="hidden 06">84.93</td><td class="hidden 06">84.93</td><td class="hidden 06">84.93</td><td class="hidden 06">84.94</td><td class="hidden 06">84.94</td><td class="hidden 06">84.96</td><td class="hidden 06">84.96</td><td class="mois">84.96</td><td class="mois">84.96</td><td class="mois">84.96</td><td class="mois">85.11</td>
</tbody>
</table>
</div>

dsl de mettre toute la page mais c'est le mieu pour comprendre le soucis est de le tester: clicke sur may puis reclik sur may et ensuite clik sur la ligne

voila si quelqu'un a une piste car un peu à cours d'idée

Merci beaucoup
Boo

voila donc si quelqu'un à une idée pour corriger ce petit probleme

**nabab** · 08/07/2009, 18h00

Je crois que lorsque tu cliques ton TD avec la classe mois, tu cliques en meme temps ton TR parent, et donc que les deux fonctions sont appelées.

**danielhagnoul** · 09/07/2009, 00h59

Bonsoir.

Un id doit être unique, il y a plusieurs "05", plusieurs "06" et plusieurs "07".

**boo64** · 09/07/2009, 09h50

Merci pour vos réponses donc pour danielhagnoul

oui en effet une petite étourderie dans le php qui génère le html mais cela n'influe pas sur mon pb

Nabab en effet mais ds le fichier ci-desous je n'ai la classe mois que sur les th et le probleme reste entier :

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
<style type="text/css">
table {
	border: 1px solid #403b33;
	border-collapse: collapse;
	margin-top:2%;
}
 
table thead tr th {
	border: 1px solid #403b33;
	font-weight: normal;
	text-align: center;
	background-color:#403b33; 
	color:white;
}
 
table tbody tr td {
 
	border: 1px solid #403b33;
	padding: 3px;
 
}
.parent{
	cursor: pointer;
	color: #FF6600;
	font-weight:bold;
}
 
.mois{
cursor: pointer;
font-weight:bold; 
}
.child{
	color:#403b33;
	display: none;
	font-weight: normal;
	text-align: center;
	cursor: default;
}
.hidden{
	display: none;
}
.col{
	font-weight: bold; 
	color:#403b33;
}
</style>
<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript">
		$(document).ready(function () {
			$('.parent').click(function(){
				$('.'+$(this).attr("id")).toggle();
			});
			$('.mois').click(function(){
				$('.'+$(this).attr("id")).toggle();
			});			
		});
</script>
<div id="tab"><table>
<thead>
	<th> en % </th><th  class="hidden 04">01</th><th class="hidden 05">27</th><th  class="hidden 05">28</th><th  class="hidden 05">29</th><th  class="hidden 05">31</th><th id="05" class="mois">May</th><th  class="hidden 06">04</th><th  class="hidden 06">05</th><th  class="hidden 06">08</th><th  class="hidden 06">09</th><th  class="hidden 06">10</th><th class="hidden 06">25</th><th  class="hidden 06">26</th><th  class="hidden 06">29</th><th  class="hidden 06">30</th><th id="06" class="mois">Jun</th><th id="07" class="mois">01</th><th  class="mois">02</th><th  class="mois">08</th>
</thead>
<tbody>
	<tr id="_SO" class="parent"><td class="col">_SO</td>
	<td  class="hidden 04">85.53</td><td  class="hidden 05">85.51</td><td  class="hidden 05">85.51</td><td  class="hidden 05">85.51</td><td  class="hidden 05">85.52</td><td>85.52</td><td  class="hidden 06">85.52</td><td  class="hidden 06">85.52</td><td  class="hidden 06">85.52</td><td  class="hidden 06">85.52</td><td  class="hidden 06">85.52</td><td  class="hidden 06">85.54</td><td  class="hidden 06">85.54</td><td  class="hidden 06">85.58</td><td  class="hidden 06">85.58</td><td>85.58</td><td  >85.58</td><td  >85.58</td><td  >85.94</td>
	</tr>
	<tr id="B2" class="_SO child"><td class="col"> |- B2</td>
	<td class="hidden 04">84.95</td><td class="hidden 05">84.94</td><td class="hidden 05">84.94</td><td class="hidden 05">84.94</td><td class="hidden 05">84.94</td><td>84.94</td><td class="hidden 06">84.94</td><td class="hidden 06">84.94</td><td class="hidden 06">84.93</td><td class="hidden 06">84.93</td><td class="hidden 06">84.93</td><td class="hidden 06">84.94</td><td class="hidden 06">84.94</td><td class="hidden 06">84.96</td><td class="hidden 06">84.96</td><td >84.96</td><td >84.96</td><td >84.96</td><td >85.11</td>
</tbody>
</table>
</div>

ps : encore dsl de fournir tout ce code mais por tester le soucis c le mieu je pense

**nabab** · 09/07/2009, 14h22

Je viens de tester ton code, j'ai bien cliqué les éléments dans l'ordre que tu donnes, et je n'ai pas eu le probleme que tu décris...
Testé avec FF3 et IE7.

**boo64** · 09/07/2009, 14h38

Teste sous IE6 (je dois utiliser ce navigateur) :

tu clique sur la colonne de may: cela se déplie bien

tu reclique cela se repli bien

tu clique maintenant sur la ligne SO la ligne cachée apparait mais avec les colonnes des jours de mai dépliées

Tableau depliable jquery

jQuery

Vue hybride

Discussions similaires

Partager

Partager