Tableau depliable jquery

Version imprimable

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 (:aie: dur à expliquer)

voici un exemple testé sous ie qui montre le soucis

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

08/07/2009, 18h00
nabab

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.
09/07/2009, 00h59
danielhagnoul

Bonsoir.

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

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:

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

09/07/2009, 14h22
nabab

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.
09/07/2009, 14h38
boo64

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

Eh non, j'ai le regret de te dire que ton code fonctionne bien sur tous les navigateurs!
Voici la page complete que je teste. T'aurais quand meme pas mis ton code ou tes styles dans le body?

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
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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<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="public_html/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
		$(document).ready(function () {
			$('.parent').click(function(){
				$('.'+$(this).attr("id")).toggle();
			});
			$('.mois').click(function(){
				$('.'+$(this).attr("id")).toggle();
			});			
		});
</script>
</head>
<body>
<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>
</body>
</html>

Bonsoir.

Ce fut long et laborieux et sans l'aide de Firebug :ccool: je n'y serai pas arrivé.

Il se trouve que toggle() fait bien son travail sur un <tr> visible, mais pour un <tr> caché il ne fait son travail qu'à l'aller et non au retour. De plus dans le cas d'une <table> il ne joue pas sur display bloc/display none, mais sur display table-cell/display none.

Le code suivant semble fonctionner correctement (attention il manquait un </tr>) :

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
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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <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="../lib/jquery-1.3.2.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $('tr.parent').click(function(){
                $('tr.' + this.id).toggle();
            });
 
            $('.mois').click(function(){
                if ($('.' + this.id).css("display") == "table-cell"){
                    $('.' + this.id).css("display","none");
                } else {
                    $('.' + this.id).css("display","table-cell");
                }
            });
 
        });
    </script>
</head>
<body>
    <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>
                </tr> <!-- était absent -->
            </tbody>
        </table>
    </div>
</body>
</html>

10/07/2009, 10h14
boo64

oui voila c'était exactement le problème identifié je teste ça de suite un grand merci

ps: pour le tr manquant cela vient que l'exemple donner est un vieu copier coller du code source de ma page je l'ai réduit le tableau étant beaucoup plus grand ;-)

Citation:

T'aurais quand meme pas mis ton code ou tes styles dans le body?

je ne suis pas tres fort en js ms merci je sais quand même faire une page :p
10/07/2009, 10h27
boo64

arf en regardant de plus prés ton code tu utilise la propriété table cell pour le display qui n'est pas reconnu par ie6.... sinon sous firefox c impec lol

j'essaye de trovuer une astuce si t'as une idée ;)

Bon voici la solution final pour ie6:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
        $(document).ready(function(){
            $('tr.parent').click(function(){
                $('tr.' + this.id).toggle();
            });
 
            $('.mois').click(function(){
 
                if ($('.' + this.id).css("display") == "block"){
                    $('.' + this.id).css("display","none");
                } else {
                    $('.' + this.id).css("display","block");
                }
            });

donc apparemment le toggle sous ie6 utilise bien block (remarqué à l'aide de bon vieux alert($('.' + this.id).css("display") et oui pas de firebug :cry:)

donc en gros le soucis venait bien d'un bug de la fonction toggle ?

on est bien d'accord?

Bonjour.

IE8 fait des caprices, il vaut mieux oublier toggle() pour manipuler une <table>.

Pour IE8, C2 et F3.5 :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
$('.parent').click(function(){
	if ($('.' + this.id).css("display") == "table-row"){
		$('.' + this.id).css("display","none");
	} else {
		$('.' + this.id).css("display","table-row");
	}
});
 
$('.mois').click(function(){
	if ($('.' + this.id).css("display") == "table-cell"){
		$('.' + this.id).css("display","none");
	} else {
		$('.' + this.id).css("display","table-cell");
	}
});

La version avec block/none ne fonctionne pas du tout sous F3.5 et C2

15/07/2009, 09h44
boo64

intéressant, pr un code "propre" il faut donc ta version plus le block none pr ie6 :ccool: