Tableau dynamique sur base de checkbox

Version imprimable

08/10/2010, 15h10
bogizo

Tableau dynamique sur base de checkbox

Hello à tous,

Voici mon problème, je voudrais créer un tableau dynamiquement sur base de checkbox, c'est a dire qu'en fonction des checkbox selectionnés, les colonnes appropriées s'affiche ou non.

par exemple: un tableau reprenant les différentes matières à l'école

- il y aurait 4 checkbox (math, français, histoire, géo)

- chaque matières à une colonnes avec le nom de la matière et des "sous-colonnes) pour EXAM1, EXAM2 et TOTAL.

- Si français et Géo sont cochés, le tableau contiendra au maximum 6 colonnes pour les matières et 1 à part pour le nom de l'élèves (mais la c'est vraiment pour être précis.... :-D)

J'espère avoir été assez précis et clair dans mon explication.

Merci d'avance pour vos réponses

Bogizo
08/10/2010, 15h57
le_chomeur

Bonjour,
lors du click sur ta checkbox, tu dois associé l'index de ta colonne ( exemple la seconde colonne aura pour index 1 )
puis boucler sur toutes les lignes de ton tableau et masquer la cellule avec l'index sélectionnée ...

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
<!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" xml:lang="fr">
 
<head>
 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
 
    <title>Tutoriel de Savageman - Crꦺ votre site (presque) complet PHP : architecture MVC et bonnes pratiques !</title>
 
    <meta http-equiv="Content-Language" content="fr" />
    <script type="text/javascript">
        function masqueColonne(indice,etat){
            //récupération de toute les lignes
            var lstTr = document.getElementById('montableau').getElementsByTagName('tr');
            //Pour chaque ligne, on va parcourir les cellules et vérifier si l'on doit afficher ou non la colonne a l'indice passé en paramètre
            for(var i = 0, l = lstTr.length; i <l ; i++){
                var lstTd = lstTr[i].getElementsByTagName('td');
                    if(etat){
                        lstTd[indice].style.display = 'none';
                    }
                    else{
                        lstTd[indice].style.display = 'inline';
                    }
            }
 
        }
    </script>
</head>
 
<body>
<input type="checkbox" onchange="masqueColonne(0,this.checked)" />
<input type="checkbox" onchange="masqueColonne(1,this.checked)" />
<input type="checkbox" onchange="masqueColonne(2,this.checked)" />
<table id="montableau">
<tr>
    <td>première</td>
    <td>seconde</td>
    <td>troisieme</td>
</tr>
<tr>
    <td>première</td>
    <td>seconde</td>
    <td>troisieme</td>
</tr>
<tr>
    <td>première</td>
    <td>seconde</td>
    <td>troisieme</td>
</tr>
<tr>
    <td>première</td>
    <td>seconde</td>
    <td>troisieme</td>
</tr>
<tr>
    <td>première</td>
    <td>seconde</td>
    <td>troisieme</td>
</tr>
<tr>
    <td>première</td>
    <td>seconde</td>
    <td>troisieme</td>
</tr>
</table>
</div>
</body>
</html>

voici un exemple , et mes excuses, il faut utiliser display="inline"

cordialement

08/10/2010, 16h07
bogizo

Ca l'air tellement simple :lol:

aurais tu un petit exemple sous la main.. ou une facon d'ajouter l'index de ma colonne au changement de status du checkbox?

merci d'avance
08/10/2010, 16h11
le_chomeur

a une minute près ;) regarde le script ci-dessus
11/10/2010, 08h53
bogizo

Nickel merci beaucoup!!!;)

Malheureusement j'ai encore un soucis... et il s'avère, à mon avis, nettement plus compliqué!

le problème est que j'utilise aussi dans mon tableau des TH et des colspans...

je te met un exemple de mon tableau :

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
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
<!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" xml:lang="fr">
 
<head>
 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
 
    <title>test</title>
<!--    <link rel="stylesheet" href="style.css" type="text/css">-->
 
    <meta http-equiv="Content-Language" content="fr" />
    <script type="text/javascript">
        function masqueColonne(indice,etat){
            flag=0;
            if (isNaN(indice)){
              flag=1;
              arrayOfStrings = indice.split("-");
              colonBegin= arrayOfStrings[0];
              colonEnd= arrayOfStrings[1];         
            }
            //récupération de toute les lignes
            var lstTr = document.getElementById('montableau').getElementsByTagName('tr');
            //Pour chaque ligne, on va parcourir les cellules et vérifier si l'on doit afficher ou non la colonne a l'indice passé en paramètre
            for(var i = 0, l = lstTr.length; i <l ; i++){
                var lstTd = lstTr[i].getElementsByTagName('td');
                    if(etat){
                      if (flag){
                        for(var j = colonBegin; j <=colonEnd ; j++){
                          lstTd[j].style.display = 'inline';
                        }
                      } else {
                          lstTd[indice].style.display = 'inline';
                      }
                    }
                    else{
                      if (flag){
                        for(var j = colonBegin; j <=colonEnd ; j++){
                          lstTd[j].style.display = 'none';
                        }
                      } else {
                          lstTd[indice].style.display = 'none';
                      }
                    }
            }
        }
    </script>
</head>
 
<body>
<input type="checkbox" checked onchange="masqueColonne('0-3',this.checked)" />
<input type="checkbox" checked onchange="masqueColonne('4-6',this.checked)" />
<input type="checkbox" checked onchange="masqueColonne('8-12',this.checked)" />
<input type="checkbox" checked onchange="masqueColonne('13-16',this.checked)" />
<input type="checkbox" checked onchange="masqueColonne('17-19',this.checked)" />
<table border id="montableau">
<THEAD>
          <TR>
 
            <TH COLSPAN=7>Complexe 1</TH>
            <TH COLSPAN=1 BGCOLOR="#ffffff"></TH>
            <TH COLSPAN=12>Complexe 2</TH>
          </TR>
          <TR>
 
            <TH COLSPAN=4>Reception</TH>
            <TH COLSPAN=3>Attaque</TH>
            <TH COLSPAN=1 BGCOLOR="#ffffff"></TH>
            <TH COLSPAN=5>Service</TH>
            <TH COLSPAN=4>Défense</TH>
            <TH COLSPAN=3>Attaque</TH>
          </TR>          
          <TR>
            <TH>++</TH>
            <TH>+0</TH>
            <TH>0</TH>
            <TH>out</TH>
            <TH>++</TH>
            <TH>0</TH>
            <TH>out</TH>
            <TH>Joueur</TH>
            <TH>out</TH>
            <TH>0</TH>
            <TH>0+</TH>
            <TH>++</TH>
            <TH>raté</TH>
            <TH>++</TH>
            <TH>+0</TH>
            <TH>0</TH>
            <TH>out</TH>
            <TH>++</TH>
            <TH>0</TH>
            <TH>out</TH>
          </TR>
          </THEAD>
<tr>
    <td>premiere</td>
    <td>seconde</td>
    <td>troisieme</td>
    <td>quatrieme</td>
    <td>premiere</td>
    <td>seconde</td>
    <td>troisieme</td>
    <td>quatrieme</td>
    <td>premiere</td>
    <td>seconde</td>
    <td>troisieme</td>
    <td>quatrieme</td>
    <td>premiere</td>
    <td>seconde</td>
    <td>troisieme</td>
    <td>quatrieme</td>
    <td>premiere</td>
    <td>seconde</td>
    <td>troisieme</td>
    <td>quatrieme</td>
</tr>
<tr>
    <td>premiere</td>
    <td>seconde</td>
    <td>troisieme</td>
    <td>quatrieme</td>
    <td>premiere</td>
    <td>seconde</td>
    <td>troisieme</td>
    <td>quatrieme</td>
    <td>premiere</td>
    <td>seconde</td>
    <td>troisieme</td>
    <td>quatrieme</td>
    <td>premiere</td>
    <td>seconde</td>
    <td>troisieme</td>
    <td>quatrieme</td>
    <td>premiere</td>
    <td>seconde</td>
    <td>troisieme</td>
    <td>quatrieme</td>
</tr>
<tr>
    <td>premiere</td>
    <td>seconde</td>
    <td>troisieme</td>
    <td>quatrieme</td>
    <td>premiere</td>
    <td>seconde</td>
    <td>troisieme</td>
    <td>quatrieme</td>
    <td>premiere</td>
    <td>seconde</td>
    <td>troisieme</td>
    <td>quatrieme</td>
    <td>premiere</td>
    <td>seconde</td>
    <td>troisieme</td>
    <td>quatrieme</td>
    <td>premiere</td>
    <td>seconde</td>
    <td>troisieme</td>
    <td>quatrieme</td>
</tr>
<tr>
    <td>premiere</td>
    <td>seconde</td>
    <td>troisieme</td>
    <td>quatrieme</td>
    <td>premiere</td>
    <td>seconde</td>
    <td>troisieme</td>
    <td>quatrieme</td>
    <td>premiere</td>
    <td>seconde</td>
    <td>troisieme</td>
    <td>quatrieme</td>
    <td>premiere</td>
    <td>seconde</td>
    <td>troisieme</td>
    <td>quatrieme</td>
    <td>premiere</td>
    <td>seconde</td>
    <td>troisieme</td>
    <td>quatrieme</td>
</tr>
<tr>
    <td>premiere</td>
    <td>seconde</td>
    <td>troisieme</td>
    <td>quatrieme</td>
    <td>premiere</td>
    <td>seconde</td>
    <td>troisieme</td>
    <td>quatrieme</td>
    <td>premiere</td>
    <td>seconde</td>
    <td>troisieme</td>
    <td>quatrieme</td>
    <td>premiere</td>
    <td>seconde</td>
    <td>troisieme</td>
    <td>quatrieme</td>
    <td>premiere</td>
    <td>seconde</td>
    <td>troisieme</td>
    <td>quatrieme</td>
</tr>
<tr>
    <td>premiere</td>
    <td>seconde</td>
    <td>troisieme</td>
    <td>quatrieme</td>
    <td>premiere</td>
    <td>seconde</td>
    <td>troisieme</td>
    <td>quatrieme</td>
    <td>premiere</td>
    <td>seconde</td>
    <td>troisieme</td>
    <td>quatrieme</td>
    <td>premiere</td>
    <td>seconde</td>
    <td>troisieme</td>
    <td>quatrieme</td>
    <td>premiere</td>
    <td>seconde</td>
    <td>troisieme</td>
    <td>quatrieme</td>
</tr>
</table>
 
</div>
</body>
</html>

Comme tu peux le voir j'ai modifié un poil ce que tu m'avais proposé pour pouvoir effacer plusieurs colonnes en même temps, croyant que ca allait m'aider.

A priori, le fait que des TH soir présent dans le tableau ennui très fort le javascript.

merci d'avance du coup de main!

Bogizo

Je pense avoir trouvé le bon bout en définissant l'id montableau sur le tbody au lieu du table. ainsi je garde la premiere ligne de mon tableau... malheureusement, les colspans ne restent pas correct.

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
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
<!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" xml:lang="fr">
 
<head>
 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
 
    <title>test</title>
<!--    <link rel="stylesheet" href="style.css" type="text/css">-->
 
    <meta http-equiv="Content-Language" content="fr" />
    <script type="text/javascript">
        function masqueColonne(indice,etat){
            flag=0;
            if (isNaN(indice)){
              flag=1;
              arrayOfStrings = indice.split("-");
              colonBegin= arrayOfStrings[0];
              colonEnd= arrayOfStrings[1];         
            }
            //récupération de toute les lignes
            var lstTr = document.getElementById('montableau').getElementsByTagName('tr');
            //Pour chaque ligne, on va parcourir les cellules et vérifier si l'on doit afficher ou non la colonne a l'indice passé en paramètre
            for(var i = 0, l = lstTr.length; i <l ; i++){
                if (lstTr[i].getElementsByTagName('TH')){
 
                }
                var lstTd = lstTr[i].getElementsByTagName('td');
                    if(etat){
                      if (flag){
                        for(var j = colonBegin; j <=colonEnd ; j++){
                          lstTd[j].style.display = 'inline';
                        }
                      } else {
                          lstTd[indice].style.display = 'inline';
                      }
                    }
                    else{
                      if (flag){
                        for(var j = colonBegin; j <=colonEnd ; j++){
                          lstTd[j].style.display = 'none';
                        }
                      } else {
                          lstTd[indice].style.display = 'none';
                      }
                    }
            }
        }
    </script>
</head>
 
<body>
<input type="checkbox" checked onchange="masqueColonne('0',this.checked)" />
<input type="checkbox" checked onchange="masqueColonne('1',this.checked)" />
<input type="checkbox" checked onchange="masqueColonne('2',this.checked)" />
<input type="checkbox" checked onchange="masqueColonne('3',this.checked)" />
<input type="checkbox" checked onchange="masqueColonne('4',this.checked)" />
<table border id="montfableau">
<THEAD>
          <TR> 
            <TH COLSPAN=7>Complexe 1</TH>
            <TH COLSPAN=1 BGCOLOR="#ffffff"></TH>
            <TH COLSPAN=12>Complexe 2</TH>
          </TR>
</THEAD>
<tbody id="montableau">
          <TR>
 
            <td COLSPAN=4>Reception</td>
            <td COLSPAN=3>Attaque</td>
            <td COLSPAN=1 BGCOLOR="#ffffff"></td>
            <td COLSPAN=5>Service</td>
            <td COLSPAN=4>Défense</td>
            <td COLSPAN=3>Attaque</td>
          </TR>          
          <TR>
            <td>++</td>
            <td>+0</td>
            <td>0</td>
            <td>out</td>
            <td>++</td>
            <td>0</td>
            <td>out</td>
            <td>Joueur</td>
            <td>out</td>
            <td>0</td>
            <td>0+</td>
            <td>++</td>
            <td>raté</td>
            <td>++</td>
            <td>+0</td>
            <td>0</td>
            <td>out</td>
            <td>++</td>
            <td>0</td>
            <td>out</td>
          </TR>
 
<tr>
    <td>premiere</td>
    <td>seconde</td>
    <td>troisieme</td>
    <td>quatrieme</td>
    <td>premiere</td>
    <td>seconde</td>
    <td>troisieme</td>
    <td>quatrieme</td>
    <td>premiere</td>
    <td>seconde</td>
    <td>troisieme</td>
    <td>quatrieme</td>
    <td>premiere</td>
    <td>seconde</td>
    <td>troisieme</td>
    <td>quatrieme</td>
    <td>premiere</td>
    <td>seconde</td>
    <td>troisieme</td>
    <td>quatrieme</td>
</tr>
<tr>
    <td>premiere</td>
    <td>seconde</td>
    <td>troisieme</td>
    <td>quatrieme</td>
    <td>premiere</td>
    <td>seconde</td>
    <td>troisieme</td>
    <td>quatrieme</td>
    <td>premiere</td>
    <td>seconde</td>
    <td>troisieme</td>
    <td>quatrieme</td>
    <td>premiere</td>
    <td>seconde</td>
    <td>troisieme</td>
    <td>quatrieme</td>
    <td>premiere</td>
    <td>seconde</td>
    <td>troisieme</td>
    <td>quatrieme</td>
</tr>
<tr>
    <td>premiere</td>
    <td>seconde</td>
    <td>troisieme</td>
    <td>quatrieme</td>
    <td>premiere</td>
    <td>seconde</td>
    <td>troisieme</td>
    <td>quatrieme</td>
    <td>premiere</td>
    <td>seconde</td>
    <td>troisieme</td>
    <td>quatrieme</td>
    <td>premiere</td>
    <td>seconde</td>
    <td>troisieme</td>
    <td>quatrieme</td>
    <td>premiere</td>
    <td>seconde</td>
    <td>troisieme</td>
    <td>quatrieme</td>
</tr>
<tr>
    <td>premiere</td>
    <td>seconde</td>
    <td>troisieme</td>
    <td>quatrieme</td>
    <td>premiere</td>
    <td>seconde</td>
    <td>troisieme</td>
    <td>quatrieme</td>
    <td>premiere</td>
    <td>seconde</td>
    <td>troisieme</td>
    <td>quatrieme</td>
    <td>premiere</td>
    <td>seconde</td>
    <td>troisieme</td>
    <td>quatrieme</td>
    <td>premiere</td>
    <td>seconde</td>
    <td>troisieme</td>
    <td>quatrieme</td>
</tr>
<tr>
    <td>premiere</td>
    <td>seconde</td>
    <td>troisieme</td>
    <td>quatrieme</td>
    <td>premiere</td>
    <td>seconde</td>
    <td>troisieme</td>
    <td>quatrieme</td>
    <td>premiere</td>
    <td>seconde</td>
    <td>troisieme</td>
    <td>quatrieme</td>
    <td>premiere</td>
    <td>seconde</td>
    <td>troisieme</td>
    <td>quatrieme</td>
    <td>premiere</td>
    <td>seconde</td>
    <td>troisieme</td>
    <td>quatrieme</td>
</tr>
<tr>
    <td>premiere</td>
    <td>seconde</td>
    <td>troisieme</td>
    <td>quatrieme</td>
    <td>premiere</td>
    <td>seconde</td>
    <td>troisieme</td>
    <td>quatrieme</td>
    <td>premiere</td>
    <td>seconde</td>
    <td>troisieme</td>
    <td>quatrieme</td>
    <td>premiere</td>
    <td>seconde</td>
    <td>troisieme</td>
    <td>quatrieme</td>
    <td>premiere</td>
    <td>seconde</td>
    <td>troisieme</td>
    <td>quatrieme</td>
</tr>
</tbody>
</table>
 
</div>
</body>
</html>

Je voudrais que les deux premieres colonnes (Reception et Attaque) reste des sous colonnes de complexe 1 et les 3 suivantes des sous colonnes de complexe 2.. qu'elles soient visible ou pas.

une idée?

merci d'avance

12/10/2010, 16h35
le_chomeur

Le principe :)
=> tu dois savoir quelles colonnes sont associé a quel th, et modifié celui ci en conséquence :

TH TH TH
TD TDTD TD

on a donc à l'indice 2 ( 3eme TD ) tu as donc une th avec un colspan de 2
tu fais : collectionTH[indicecourant-1].colspan = 1

c'est un exemple , mais c'est beaucoup plus complexe dans la pratique si tu veux le rendre générique ...
14/10/2010, 15h33
bogizo

merci pour la réponse, je vois plus ou moins ou tu veux en venir! mais je t'avoue que je cale un peu sur le développement... :?

Aurais-tu le temps de me lancer dans celui-ci par un exemple un peu plus poussé? (si pas le temps, pas grave, déjà un grand merci pour toutes ces réponses:ccool:)

Bàt

Bogizo
14/10/2010, 16h19
le_chomeur

je viens d'analyser ta structure "complexe" et effectivement c'est chiant :p

alors il faut que tu fasses un tableau de référence ce serait plus simple en image mais en gros pour la première colonne :

[0]Colspan = 7
--[0]Colspan = 4
----[0]Colspan=1
----[1]Colspan=1
----[2]Colspan=1
----[3]Colspan=1
--[1]Colspan = 3
----[0]Colspan=1
----[1]Colspan=1
----[2]Colspan=1

voila maintenant , quand tu as ton tableau indicé , il va falloir modifier les deux colspan si modifie l'élément àa la posision [0][0][2]

tu devras donc modifier
[0]Colspan = en 6
et
[0]Colspan = 7
en
--[0]Colspan = 3

tu devras donc passer les 2 indices du parent a ta méthode ...
j'espère avoir été assez clair ??