Configurer les colonnes d'un tableau dans l'ordre

**kewan** · 23/10/2021, 22h31

Bonjour tout le forum,

J’ai besoin de votre aide.

Je voudrais créer une page pour que les utilisateurs puissent configurer un tableau avec les colonnes qu'ils souhaitent.

Les utilisateurs doivent pouvoir configurer des niveaux d'évaluation en cochant ou décochant des checkbox. Je n'arrive pas à faire en sorte que les colonnes s'affichent dans l'ordre des niveaux. Du plus petit niveau jusqu'au plus grand.

Voilà mon code :

Code html :

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
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<title>test</title>
	</head>
	<body>
		<table border="1" id="table">
			<tr id="ligne">
				<td>Niveau</td>
			</tr>
		</table>
 
		1<input type="checkbox" name="1" value="1" id="1" onclick="ajouterSupprimer(this, 1, 'Au')"/><label for="1">Au : Aucune maîtrise</label><br/><br/>
		2<input type="checkbox" name="2" value="2" id="2" onclick="ajouterSupprimer(this, 2, 'I')"/><label for="2">I : Maîtrise Insuffisante</label><br/><br/>
		3<input type="checkbox" name="3" value="3" id="3" onclick="ajouterSupprimer(this, 3, 'F')"/><label for="3">F : Maîtrise fragile</label><br/><br/>
		4<input type="checkbox" name="4" value="4" id="4" onclick="ajouterSupprimer(this, 4, 'S')"/><label for="4">S : Maîtrise satisfaisante</label><br/><br/>
		5<input type="checkbox" name="5" value="5" id="5" onclick="ajouterSupprimer(this, 5, 'B')"/><label for="5">B : Bonne Maîtrise</label><br/><br/>
		6<input type="checkbox" name="6" value="6" id="6" onclick="ajouterSupprimer(this, 6, 'TB')"/><label for="6">TB : Très Bonne maîtrise</label><br/><br/>
		7<input type="checkbox" name="7" value="7" id="7" onclick="ajouterSupprimer(this, 7, 'E')"/><label for="7">E : Excellente maîtrise</label><br/><br/>
		8<input type="checkbox" name="8" value="8" id="8" onclick="ajouterSupprimer(this, 8, 'T')"/><label for="8">T : Maîtrise totale</label><br/><br/>
 
		<script type="application/javascript">
			function supprimer(contenu){
				for(var i = 1; i <= 8; i++){
					var row = document.getElementById("ligne");
					var cellule = row.getElementsByTagName("td");
					// alert(i);
					if(cellule[i].innerHTML == contenu){
						row.deleteCell(i);
					}
				}
			}
 
			function ajouter(position, contenu){
 
				let nbColonne = document.getElementById('table').rows[0].cells.length;
 
				let lastCelulle = document.getElementById('table').getElementsByTagName("tr")[0].getElementsByTagName("td").length;
 
				let mesLignes = document.getElementById('table').getElementsByTagName("tr");
 
				if(nbColonne <= position){
					var newCell = mesLignes[0].insertCell(lastCelulle);
					newCell.innerHTML = contenu;
				}else if(nbColonne > position){
					var newCell = mesLignes[0].insertCell(position);
					newCell.innerHTML = contenu;
				}
			}
 
			function ajouterSupprimer(cases, position, contenu){
 
				var nom = document.getElementsByName(cases.name);
				var checkbox = document.getElementById(cases.id);
				if(checkbox.checked){
					ajouter(position, contenu);
				}else{
					supprimer(contenu);
				}
			}
		</script>
	</body>
</html>

Si l'utilisateur coche les chekbox dans l'ordre, ça fonctionne, s'il coche en commençant par les plus hauts ou s'il revient en arrière les niveaux se mélangent.
Je ne sais pas comment m'y prendre, faut-il cacher les colonnes ou les faire apparaître ? Jouer sur le css ? Trier les colonnes ?

Merci pour votre aide.

**Toufik83** · 24/10/2021, 02h28

Bonjour,

Il faudrait utiliser un tableau, dataset et sort, comme il est possible de supprimer les paramètres de la fonction ajouter:

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
 
function ajouter() {
  let table = document.getElementById('table'),
    row = table.rows[0],
    text = event.target.nextSibling.innerText.split(" ")[0],
    arr;
 
  document.querySelectorAll('[type="checkbox"]:checked')
    .forEach((checkbox) => {
      let td = document.createElement("td");
      td.textContent = text;
      td.dataset.ordre = event.target.value;
      if (row.querySelectorAll("td[data-ordre='" + event.target.value + "']").length == 0)
        row.appendChild(td);
      arr = [...row.querySelectorAll("td[data-ordre]")];
    });
  row.querySelectorAll("td[data-ordre]")
    .forEach((td) => {
      td.remove();
    });
  arr
    .sort((a, b) => {
      return a.dataset.ordre < b.dataset.ordre ? -1 : 1;
    })
    .forEach((cell) => {
      if (document.querySelectorAll("td[data-ordre='" + cell.dataset.ordre + "']").length == 0)
        row.appendChild(cell);
    });
 
}

Tu peux optimiser le code et l'organiser encore mieux ....

**kewan** · 24/10/2021, 10h26

Nickel, merci

J'aurais jamais trouvé tout seul, beaucoup d'éléments que je ne maîtrise pas.

Envoyé par Toufik83

Tu peux optimiser le code et l'organiser encore mieux ....

Ça va attendre un peu.

edit :

Du coup j'ai retouché ma fonction supprimer()

Code :

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

1
2
3
4
function supprimer(){
	let cellule = document.querySelectorAll("td[data-ordre='" + event.target.value + "']");
	cellule[0].remove();
}

**kewan** · 28/10/2021, 22h21

Bonjour tout le forum,

Je reviens à la charge

J'essai d'adapter le code à mon tableau final. Je n'arrive pas à créer/supprimer une nouvelle colonne pour chacune des lignes du tableau.

Voilà où j'en suis actuellement :

https://jsfiddle.net/2gpodure/

Code html :

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
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
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
	<table id="table" class="gE">
		<thead>
			<tr>
				<td>NOM et dates de la période de l année</td>
				<td colspan="8" class="pCentre"><span class="texteTaille2 texteSurlignerJaune">NOM</span></td>
			</tr>
			<tr>
				<th>Capacités / compétences</th>
				<th>Critères</th>
				<th>Critères opérationnels</th>
				<th style="background-color:rgb(255,255,255);">NE</th>
				<th style="background-color:rgb(255,0,0)" data-ordre="2">I</th>
				<th style="background-color:rgb(255,192,0);" data-ordre="3">F</th>
				<th style="background-color:rgb(146,208,80);" data-ordre="4">S</th>
				<th style="background-color:rgb(0,176,80);" data-ordre="6">TB</th>
				<th style="background-color:rgb(0,176,255);" data-ordre="9">Total</th>
			</tr>
		</thead>
		<?php $ch = "checked";?>
		<tbody>
			<tr class="fr">
				<td rowspan="5" class="basE">
					Mobiliser :<br>
					ses compétences,<br>
					ses connaissances et<br>
					les ressources disponibles
				</td>
				<td rowspan="2" class="basF">
					Mobiliser ses compétences et connaissances
				</td>
				<td class="basF">Réinvestir les apports théoriques</td>
				<td class="basF"><input type="radio" name="1" id="capacite1_1_1" value="-1"/></td>
				<td data-ordre="2" class="basF"><input type="radio" name="1" id="capacite1_1_2" value="0"/></td>
				<td data-ordre="3" class="basF"><input type="radio" name="1" id="capacite1_1_3" value="2.5"/></td>
				<td data-ordre="4" class="basF"><input type="radio" name="1" id="capacite1_1_4" value="5.5"/></td>
				<td data-ordre="6" class="basF"><input type="radio" name="1" id="capacite1_1_5" value="8"/></td>
				<td data-ordre="9" class="basE" rowspan="5"><input type="text" name="capacite1" id="capacite1" value="" size="2" readonly/> / 8</td>
			</tr>
			<tr class="fr">
				<td class="basF">Réinvestir les gestes professionnels</td>
				<td class="basF"><input type="radio" name="2" id="capacite1_2_1" value="-1"/></td>
				<td data-ordre="2" class="basF"><input type="radio" name="2" id="capacite1_2_2" value="0"/></td>
				<td data-ordre="3" class="basF"><input type="radio" name="2" id="capacite1_2_3" value="2.5"/></td>
				<td data-ordre="4" class="basF"><input type="radio" name="2" id="capacite1_2_4" value="5.5"/></td>
				<td data-ordre="6" class="basF"><input type="radio" name="2" id="capacite1_2_5" value="8"/></td>
			</tr>
			<tr class="fr">
				<td rowspan="3" class="basE">
					Mobiliser les ressources internes ou externes<br>
					nécessaires (partenaires, moyens,<br>
					équipements, etc.) Ressources numériques
				</td>
				<td class="basF">Utiliser les ressources internes</td>
				<td class="basF"><input type="radio" name="3" id="capacite1_3_1" value="-1"/></td>
				<td data-ordre="2" class="basF"><input type="radio" name="3" id="capacite1_3_2" value="0"/></td>
				<td data-ordre="3" class="basF"><input type="radio" name="3" id="capacite1_3_3" value="2.5"/></td>
				<td data-ordre="4" class="basF"><input type="radio" name="3" id="capacite1_3_4" value="5.5"/></td>
				<td data-ordre="6" class="basF"><input type="radio" name="3" id="capacite1_3_5" value="8"/></td>
			</tr class="fr">
			<tr class="fr">
				<td class="basF">Utiliser les ressources externes</td>
				<td class="basF"><input type="radio" name="4" id="capacite1_4_1" value="-1"/></td>
				<td data-ordre="2" class="basF"><input type="radio" name="4" id="capacite1_4_2" value="0"/></td>
				<td data-ordre="3" class="basF"><input type="radio" name="4" id="capacite1_4_3" value="2.5"/></td>
				<td data-ordre="4" class="basF"><input type="radio" name="4" id="capacite1_4_4" value="5.5"/></td>
				<td data-ordre="6" class="basF"><input type="radio" name="4" id="capacite1_4_5" value="8"/></td>
			</tr class="fr">
			<tr class="basE fr">
				<td class="basF">Utiliser les outils numériques</td>
				<td class="basF"><input type="radio" name="5" id="capacite1_5_1" value="-1"/></td>
				<td data-ordre="2" class="basF"><input type="radio" name="5" id="capacite1_5_2" value="0"/></td>
				<td data-ordre="3" class="basF"><input type="radio" name="5" id="capacite1_5_3" value="2.5"/></td>
				<td data-ordre="4" class="basF"><input type="radio" name="5" id="capacite1_5_4" value="5.5"/></td>
				<td data-ordre="6" class="basF"><input type="radio" name="5" id="capacite1_5_5" value="8"/></td>
			</tr>
 
 
			<tr class="fbla">
				<td rowspan="6" class="basE">
					S engager,<br>
					s organiser et<br>
					s intégrer<br>
					dans son environnement<br>
					de travail
				</td>
				<td rowspan="2"  class="basF">
					Organiser et planifier son travail et tenir à jour<br>
					l état des avancées et des progrès réalisés
				</td>
				<td class="basF">Créer son planning de travail</td>
				<td class="basF"><input type="radio" name="6"	id="capacite2_1_1" value="-1"/></td>
				<td data-ordre="2" class="basF"><input type="radio" name="6"	id="capacite2_1_2" value="0"/></td>
				<td data-ordre="3" class="basF"><input type="radio" name="6"	id="capacite2_1_3" value="2"/></td>
				<td data-ordre="4" class="basF"><input type="radio" name="6"	id="capacite2_1_4" value="4"/></td>
				<td data-ordre="6" class="basF"><input type="radio" name="6"	id="capacite2_1_5" value="6"/></td>
				<td data-ordre="9" class="basF" rowspan="6"><input type="text" name="capacite2" id="capacite2" value="" size="2" readonly/> / 6</td>
			</tr>
			<tr class="fbla">
				<td class="basF">Tenir à jour son journal de bord</td>
				<td class="basF"><input type="radio" name="7"	id="capacite2_2_1" value="-1"/></td>
				<td data-ordre="2" class="basF"><input type="radio" name="7"	id="capacite2_2_2" value="0"/></td>
				<td data-ordre="3" class="basF"><input type="radio" name="7"	id="capacite2_2_3" value="2"/></td>
				<td data-ordre="4" class="basF"><input type="radio" name="7"	id="capacite2_2_4" value="4"/></td>
				<td data-ordre="6" class="basF"><input type="radio" name="7"	id="capacite2_2_5" value="6"/></td>
			</tr>
			<tr class="fbla">
				<td rowspan="2"  class="basF">
					S’intégrer dans son environnement et/ou un<br>
					collectif de travail
				</td>
				<td  class="basF">S intégrer dans une équipe de travail</td>
				<td class="basF"><input type="radio" name="8"	id="capacite2_3_1" value="-1"/></td>
				<td data-ordre="2" class="basF"><input type="radio" name="8"	id="capacite2_3_2" value="0"/></td>
				<td data-ordre="3" class="basF"><input type="radio" name="8"	id="capacite2_3_3" value="2"/></td>
				<td data-ordre="4" class="basF"><input type="radio" name="8"	id="capacite2_3_4" value="4"/></td>
				<td data-ordre="6" class="basF"><input type="radio" name="8"	id="capacite2_3_5" value="6"/></td>
			</tr>
			<tr class="fbla">
				<td class="basF">Travailler en équipe</td>
				<td class="basF"><input type="radio" name="9"	id="capacite2_4_1"  value="-1"/></td>
				<td data-ordre="2" class="basF"><input type="radio" name="9"	id="capacite2_4_2"  value="0"/></td>
				<td data-ordre="3" class="basF"><input type="radio" name="9"	id="capacite2_4_3"  value="2"/></td>
				<td data-ordre="4" class="basF"><input type="radio" name="9"	id="capacite2_4_4"  value="4"/></td>
				<td data-ordre="6" class="basF"><input type="radio" name="9"	id="capacite2_4_5"  value="6"/></td>
			</tr>
			<tr class="fbla">
				<td rowspan="2" class="basE">
					Prendre des responsabilités et des initiatives<br>
					dans une démarche de projet
				</td>
				<td class="basF">Prendre sa part du travail</td>
				<td class="basF"><input type="radio" name="10"	id="capacite2_5_1"  value="-1"/></td>
				<td data-ordre="2" class="basF"><input type="radio" name="10"	id="capacite2_5_2"  value="0"/></td>
				<td data-ordre="3" class="basF"><input type="radio" name="10"	id="capacite2_5_3"  value="2"/></td>
				<td data-ordre="4" class="basF"><input type="radio" name="10"	id="capacite2_5_4"  value="4"/></td>
				<td data-ordre="6" class="basF"><input type="radio" name="10"	id="capacite2_5_5"  value="6"/></td>
			</tr>
			<tr class="basE fbla">
				<td class="basE">Prendre des initiatives</td>
				<td class="basF"><input type="radio" name="11"	id="capacite2_6_1"   value="-1"/></td>
				<td data-ordre="2" class="basF"><input type="radio" name="11"	id="capacite2_6_2"   value="0"/></td>
				<td data-ordre="3" class="basF"><input type="radio" name="11"	id="capacite2_6_3"   value="2"/></td>
				<td data-ordre="4" class="basF"><input type="radio" name="11"	id="capacite2_6_4"   value="4"/></td>
				<td data-ordre="6" class="basF"><input type="radio" name="11"	id="capacite2_6_5"   value="6"/></td>
			</tr>
 
 
 
			<tr class="fble">
				<td rowspan="9">
					Analyser son travail,<br>
					à s adapter aux aléas et<br>
					à rendre compte du travail mené<br>
				</td>
				<td rowspan="3" class="basF">
					S adapter aux situations et proposer des<br>
					solutions pour remédier aux éventuelles<br>
					difficultés rencontrées
				</td>
				<td class="basF">Repérer, identifier les difficultés</td>
				<td class="basF"><input type="radio" name="12"	id="capacite3_1_1" value="-1"/></td>
				<td data-ordre="2" class="basF"><input type="radio" name="12"	id="capacite3_1_2" value="0"/></td>
				<td data-ordre="3" class="basF"><input type="radio" name="12"	id="capacite3_1_3" value="2"/></td>
				<td data-ordre="4" class="basF"><input type="radio" name="12"	id="capacite3_1_4" value="4"/></td>
				<td data-ordre="6" class="basF"><input type="radio" name="12"	id="capacite3_1_5" value="6"/></td>
				<td data-ordre="9" class="basF" rowspan="9"><input type="text" name="capacite3" id="capacite3" value="" size="2" readonly/> / 6</td>
			</tr>
			<tr class="fble">
				<td class="basF">Proposer une solution dans sa démarche de projet</td>
				<td class="basF"><input type="radio" name="13"	id="capacite3_2_1" value="-1"/></td>
				<td data-ordre="2" class="basF"><input type="radio" name="13"	id="capacite3_2_2" value="0"/></td>
				<td data-ordre="3" class="basF"><input type="radio" name="13"	id="capacite3_2_3" value="2"/></td>
				<td data-ordre="4" class="basF"><input type="radio" name="13"	id="capacite3_2_4" value="4"/></td>
				<td data-ordre="6" class="basF"><input type="radio" name="13"	id="capacite3_2_5" value="6"/></td>
			</tr>
			<tr class="fble">
				<td class="basF">Trouver des solutions</td>
				<td class="basF"><input type="radio" name="14"	id="capacite3_3_1" value="-1"/></td>
				<td data-ordre="2" class="basF"><input type="radio" name="14"	id="capacite3_3_2" value="0"/></td>
				<td data-ordre="3" class="basF"><input type="radio" name="14"	id="capacite3_3_3" value="2"/></td>
				<td data-ordre="4" class="basF"><input type="radio" name="14"	id="capacite3_3_4" value="4"/></td>
				<td data-ordre="6" class="basF"><input type="radio" name="14"	id="capacite3_3_5" value="6"/></td>
			</tr>
			<tr class="fble">
				<td rowspan="3"  class="basF">
					Rendre compte de l état d avancement
				</td>
				<td class="basF">Expliquer sa démarche à l oral</td>
				<td class="basF"><input type="radio" name="15"	id="capacite3_4_1" value="-1"/></td>
				<td data-ordre="2" class="basF"><input type="radio" name="15"	id="capacite3_4_2" value="0"/></td>
				<td data-ordre="3" class="basF"><input type="radio" name="15"	id="capacite3_4_3" value="2"/></td>
				<td data-ordre="4" class="basF"><input type="radio" name="15"	id="capacite3_4_4" value="4"/></td>
				<td data-ordre="6" class="basF"><input type="radio" name="15"	id="capacite3_4_5" value="6"/></td>
			</tr>
			<tr class="fble">
				<td class="basF">Maîtriser les techniques de communication à l oral</td>
				<td class="basF"><input type="radio" name="16"	id="capacite3_5_1" value="-1"/></td>
				<td data-ordre="2" class="basF"><input type="radio" name="16"	id="capacite3_5_2" value="0"/></td>
				<td data-ordre="3" class="basF"><input type="radio" name="16"	id="capacite3_5_3" value="2"/></td>
				<td data-ordre="4" class="basF"><input type="radio" name="16"	id="capacite3_5_4" value="4"/></td>
				<td data-ordre="6" class="basF"><input type="radio" name="16"	id="capacite3_5_5" value="6"/></td>
			</tr>
			<tr class="fble">
				<td class="basF">Utiliser un support numérique lors d un exposé</td>
				<td class="basF"><input type="radio" name="17"	id="capacite3_6_1" value="-1"/></td>
				<td data-ordre="2" class="basF"><input type="radio" name="17"	id="capacite3_6_2" value="0"/></td>
				<td data-ordre="3" class="basF"><input type="radio" name="17"	id="capacite3_6_3" value="2"/></td>
				<td data-ordre="4" class="basF"><input type="radio" name="17"	id="capacite3_6_4" value="4"/></td>
				<td data-ordre="6" class="basF"><input type="radio" name="17"	id="capacite3_6_5" value="6"/></td>
			</tr>
			<tr class="fble">
				<td rowspan="3">
					Analyser, évaluer son travail personnel
				</td>
				<td class="basF">Déterminer ses points forts</td>
				<td class="basF"><input type="radio" name="18"	id="capacite3_7_1" value="-1"/></td>
				<td data-ordre="2" class="basF"><input type="radio" name="18"	id="capacite3_7_2" value="0"/></td>
				<td data-ordre="3" class="basF"><input type="radio" name="18"	id="capacite3_7_3" value="2"/></td>
				<td data-ordre="4" class="basF"><input type="radio" name="18"	id="capacite3_7_4" value="4"/></td>
				<td data-ordre="6" class="basF"><input type="radio" name="18"	id="capacite3_7_5" value="6"/></td>
			</tr>
			<tr class="fble">
				<td class="basF">Déterminer ses axes d amélioration</td>
				<td class="basF"><input type="radio" name="19"	id="capacite3_8_1" value="-1"/></td>
				<td data-ordre="2" class="basF"><input type="radio" name="19"	id="capacite3_8_2" value="0"/></td>
				<td data-ordre="3" class="basF"><input type="radio" name="19"	id="capacite3_8_3" value="2"/></td>
				<td data-ordre="4" class="basF"><input type="radio" name="19"	id="capacite3_8_4" value="4"/></td>
				<td data-ordre="6" class="basF"><input type="radio" name="19"	id="capacite3_8_5" value="6"/></td>
			</tr>
			<tr class="fble">
				<td>Proposer des solutions dans son travail personnel</td>
				<td class="basF"><input type="radio" name="20"	id="capacite3_9_1" value="-1"/></td>
				<td data-ordre="2" class="basF"><input type="radio" name="20"	id="capacite3_9_2" value="0"/></td>
				<td data-ordre="3" class="basF"><input type="radio" name="20"	id="capacite3_9_3" value="2"/></td>
				<td data-ordre="4" class="basF"><input type="radio" name="20"	id="capacite3_9_4" value="4"/></td>
				<td data-ordre="6" class="basF"><input type="radio" name="20"	id="capacite3_9_5" value="6"/></td>
			</tr>
		</tbody>
	</table>
 
    <table class="tbConfigGrille">
        <tbody>
             <tr>
                <th colspan="4" class="pCentre">Les niveaux d’évaluation</th>
            </tr>
                                    <tr>
                            <td><input type="checkbox" name="niv1" value="1" onclick="ajouterSupprimer(this)" id="1" /><label for="1">A Aucune maîtrise</label></td>
                        </tr>
                                            <tr>
                            <td><input type="checkbox" name="niv2" value="2" onclick="ajouterSupprimer(this)" id="2" checked='checked'/><label for="2">I Maîtrise Insuffisante</label></td>
                        </tr>
                                            <tr>
                            <td><input type="checkbox" name="niv3" value="3" onclick="ajouterSupprimer(this)" id="3" checked='checked'/><label for="3">F Maîtrise fragile</label></td>
                        </tr>
                                            <tr>
                            <td><input type="checkbox" name="niv4" value="4" onclick="ajouterSupprimer(this)" id="4" checked='checked'/><label for="4">S Maîtrise satisfaisante</label></td>
                        </tr>
                                            <tr>
                            <td><input type="checkbox" name="niv5" value="5" onclick="ajouterSupprimer(this)" id="5" /><label for="5">B Bonne Maîtrise</label></td>
                        </tr>
                                            <tr>
                            <td><input type="checkbox" name="niv6" value="6" onclick="ajouterSupprimer(this)" id="6" checked='checked'/><label for="6">TB Très Bonne maîtrise</label></td>
                        </tr>
                                            <tr>
                            <td><input type="checkbox" name="niv7" value="7" onclick="ajouterSupprimer(this)" id="7" /><label for="7">E Excellente maîtrise</label></td>
                        </tr>
                                            <tr>
                            <td><input type="checkbox" name="niv8" value="8" onclick="ajouterSupprimer(this)" id="8" /><label for="8">T Maîtrise totale</label></td>
                        </tr>
                            </tbody>
    </table>

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
		function supprimer() {
			let celluleTh = document.querySelectorAll(
				"th[data-ordre='" + event.target.value + "']"
			);
			celluleTh[0].remove();
 
			let lignesTab = document.getElementById('table').getElementsByTagName("tr"),
			celluleTd = document.querySelectorAll(
				"td[data-ordre='" + event.target.value + "']"
			);
			for (let i = 0, l = lignesTab.length; i < l; i++) {
				celluleTd[i].remove();
			}
		}
 
		function ajouter() {
			let table = document.getElementById('table'),
				row = table.rows[1],
				text = event.target.nextSibling.innerText.split(" ")[0],
				arr;
 
			document.querySelectorAll('[type="checkbox"]:checked')
				.forEach((checkbox) => {
				let th = document.createElement("th");
				th.textContent = text;
				th.dataset.ordre = event.target.value;
				if (row.querySelectorAll("th[data-ordre='" + event.target.value + "']").length == 0)
					row.appendChild(th);
				arr = [...row.querySelectorAll("th[data-ordre]")];
				});
			row.querySelectorAll("th[data-ordre]")
				.forEach((th) => {
				th.remove();
				});
			arr
				.sort((a, b) => {
				return a.dataset.ordre < b.dataset.ordre ? -1 : 1;
				})
				.forEach((cell) => {
				if (document.querySelectorAll("th[data-ordre='" + cell.dataset.ordre + "']").length == 0)
					row.appendChild(cell);
				});
 
			ajouterLigneInf();
		}
 
		function ajouterLigneInf() {
			let table = document.getElementById('table'),
				lignesTab = document.getElementById('table').getElementsByTagName("tr");
			// alert(lignesTab.length);
			for (let i = 2, l = lignesTab.length; i < l; i++) {
				// alert(i);
				let row = table.rows[i], arr;
 
				document.querySelectorAll('[type="checkbox"]:checked')
				.forEach((checkbox) => {
					let td = document.createElement("td");
					td.textContent = "a";
					td.dataset.ordre = event.target.value;
					if (row.querySelectorAll("td[data-ordre='" + event.target.value + "']").length == 0)
					row.appendChild(td);
					arr = [...row.querySelectorAll("td[data-ordre]")];
				});
				row.querySelectorAll("td[data-ordre]")
				.forEach((td) => {
					td.remove();
				});
				arr
				.sort((a, b) => {
					return a.dataset.ordre < b.dataset.ordre ? -1 : 1;
				})
				.forEach((cell) => {
					if (document.querySelectorAll("td[data-ordre='" + cell.dataset.ordre + "']").length == 0)
					row.appendChild(cell);
				});
			}
		}
 
		function ajouterSupprimer(cases) {
			var nom = document.getElementsByName(cases.name);
			var checkbox = document.getElementById(cases.id);
			if (checkbox.checked) {
				ajouter();
			} else {
				supprimer();
			}
		}

J'ai refait la fonction "supprimer" et j'ai fait la fonction "ajouterLigneInf" qui est censée ajouter une cellule pour chacune des lignes du tableau.

Merci pour votre aide.

**kewan** · 29/10/2021, 13h57

Bonjour tout le forum,

j'ai finallement pris la décision de cacher ou montrer les colonnes suivant les checkboxs sélectionnées

https://jsfiddle.net/dthpa5rm/

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
function cacherMontrer(cases) {
  let checkbox = document.getElementById(cases.id),
    celluleTd = document.querySelectorAll(
      "td[data-ordre='" + event.target.value + "']"
    ),
    celluleTh = document.querySelectorAll(
      "th[data-ordre='" + event.target.value + "']"
    );
  // Si la checkbox est cochée
  if (checkbox.checked) {
    // Montrer la cellule de l'entête
    celluleTh[0].style.display = "";
 
    // Pour toutes les cellules des autres lignes
    for (let i = 0, l = 20; i < l; i++) {
      // Montrer la cellule
      celluleTd[i].style.display = "";
    }
    // Si la checkbox n'est pas cochée
  } else {
    // Cacher la cellule de l'entête
    celluleTh[0].style.display = "none";
 
    // Pour toutes les cellules des autres lignes
    for (let i = 0, l = 20; i < l; i++) {
      // Cacher la cellule
      celluleTd[i].style.display = "none";
    }
  }
}

**Toufik83** · 30/10/2021, 01h14

Bonjour,

Suivant la même méthode, et sans l'utilisation d'une nouvelle fonction, ce code donne le résultat attendu :

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
 
function supprimer() {
    let table=document.getElementById('table'),
    firstHeadRow=table.querySelector('thead').children[1],
    celluleTh = firstHeadRow.querySelectorAll( "th[data-ordre='" + event.target.value + "']");
    table.querySelectorAll("tbody tr")
	.forEach(tr => {
		tr.querySelectorAll("td")
		.forEach((c)=>{
			if(c.dataset&&c.dataset.ordre&&c.dataset.ordre==event.target.value)
				c.remove();
		});
	});
    celluleTh[0].remove();
}
 
function ajouter() {
    let table = document.getElementById('table'),
    row = table.rows[1],
    text = event.target.nextSibling.innerText.split(" ")[0],arr;
 
   document.querySelectorAll('[type="checkbox"]:checked')
   .forEach((checkbox) => {
	if (row.querySelectorAll("th[data-ordre='" +event.target.value + "']").length == 0) {
		let th = document.createElement("th");
		th.textContent = text;
		th.dataset.ordre = event.target.value;
		row.appendChild(th);
	}
	arr = [...row.querySelectorAll("th[data-ordre]")];
    });
 
	row.querySelectorAll("th[data-ordre]")
	.forEach((th) => {
		th.remove();
	});
 
	arr
	.sort((a, b) => {
		return a.dataset.ordre < b.dataset.ordre ? -1 : 1;
	})
	.forEach((th,n) => {
		if (row.querySelectorAll("th[data-ordre='" +th.dataset.ordre + "']").length == 0) {
			row.appendChild(th);
		}
	});
 
	table.querySelectorAll("tbody tr")
	.forEach(tr => {
		let newTd = document.createElement("td");
		newTd.textContent = text,
		trIndex=tr.rowIndex-2;
		newTd.dataset.ordre=event.target.value;
		if(!tr.querySelector('[data-ordre="'+event.target.value+'"]')){
			tr.querySelectorAll("td")
			.forEach(()=>{
				let index=row.querySelector('th[data-ordre="'+event.target.value+'"]').cellIndex
				    -(row.querySelectorAll('th').length-tr.querySelectorAll('td').length),
				element=tr.cells[index].nextSibling;
				if([0,5,11].indexOf(trIndex)==-1) element=element.nextSibling;
				tr.insertBefore(newTd,element);
			});
		}
	});
}

**kewan** · 30/10/2021, 18h04

Bonjour Toufik83 , merci ça fonctionne nickel

**NoSmoking** · 01/11/2021, 10h00

Bonjour,
je rebondis sur ...

j'ai finallement pris la décision de cacher ou montrer les colonnes suivant les checkboxs sélectionnées

Lorsque l'on souhaite masquer une colonne d'une <table> la solution la plus couramment utilisée est de parcourir toutes les lignes de celle-ci et d'affecter une déclaration display:none à la cellule de la colonne concernée.

Il existe toutefois une méthode peut-être « plus élégante » qui consiste à ajouter/supprimer une classe CSS à la <table> et de laisser faire le moteur de rendu du navigateur.

La « barre de commande » ainsi que le CSS correspondant peuvent très bien être générés dynamiquement.

Voir l'exemple en ligne pour plus d'informations sur les détails de mise en œuvre :

Masquage de colonne avec classe

Configurer les colonnes d'un tableau dans l'ordre

JavaScript

Discussions similaires

Partager

Partager