Configurer les colonnes d'un tableau dans l'ordre
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:
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.
Masquage de colonne avec classe
Bonjour,
je rebondis sur ...
Citation:
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 :
