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