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.