Configurer les colonnes d'un tableau dans l'ordre

Configurer les colonnes d'un tableau dans l'ordre - Javascript/Node.js - Programmation

Marsh Posté le 23-10-2021 à 22:46:41    

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. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  <meta charset="utf-8"/>
  5.  <title>test</title>
  6. </head>
  7. <body>
  8.  <table border="1" id="table">
  9.   <tr id="ligne">
  10.    <td>Niveau</td>
  11.   </tr>
  12.  </table>
  14.  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/>
  15.  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/>
  16.  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/>
  17.  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/>
  18.  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/>
  19.  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/>
  20.  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/>
  21.  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/>
  23.  <script type="application/javascript">
  24.   function supprimer(contenu){
  25.    for(var i = 1; i <= 8; i++){
  26.     var row = document.getElementById("ligne" );
  27.     var cellule = row.getElementsByTagName("td" );
  28.     if(cellule[i].innerHTML == contenu){
  29.      row.deleteCell(i);
  30.     }
  31.    }
  32.   }
  34.   function ajouter(position, contenu){
  36.    let nbColonne = document.getElementById('table').rows[0].cells.length;
  38.    let lastCelulle = document.getElementById('table').getElementsByTagName("tr" )[0].getElementsByTagName("td" ).length;
  40.    let mesLignes = document.getElementById('table').getElementsByTagName("tr" );
  42.    if(nbColonne <= position){
  43.     var newCell = mesLignes[0].insertCell(lastCelulle);
  44.     newCell.innerHTML = contenu;
  45.    }else if(nbColonne > position){
  46.     var newCell = mesLignes[0].insertCell(position);
  47.     newCell.innerHTML = contenu;
  48.    }
  49.   }
  51.   function ajouterSupprimer(cases, position, contenu){
  53.    var nom = document.getElementsByName(cases.name);
  54.    var checkbox = document.getElementById(cases.id);
  55.    if(checkbox.checked){
  56.     ajouter(position, contenu);
  57.    }else{
  58.     supprimer(contenu);
  59.    }
  60.   }
  61.  </script>
  62. </body>
  63. </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.


Message édité par kewan le 24-10-2021 à 10:27:59
Reply

Marsh Posté le 23-10-2021 à 22:46:41   

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed