Remplir un tableau html avec javascript et le relier a un deuxieme tableau

Fermé

yasserbenazzouzi Messages postés 1 Date d'inscription dimanche 26 juillet 2020 Statut Membre Dernière intervention 26 juillet 2020 - Modifié le 26 juil. 2020 à 12:16
jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 - 27 juil. 2020 à 09:01

Bonjour

j'ai crée deux tableau en HTML , tableau Module et tableau chapitre l’objectif est à l'aide de javascript on :

1-remplir le tableau module et l'afficher

2-afficher la liste des chapitres quand on clique sur un module (faire le lien )



voici le html pou le tableau module et chapitres :

<!DOCTYPE html>
<html>
<head>
    <title> Form </title>
    <link rel="stylesheet" href="Form.css">
   

</head>
<body>
    <div class="Body">
        <div class = "tables">
    <div class="TableListeModule"> 
    <table class="modules">
         <caption>Liste des Modules </caption>
         <thead>
             <tr>
                <th>Id_Module</th>
                <th>Nom_Module</th>
             </tr>
         </thead>

             <tbody></tbody>
    </table> 
  </div>
    <div class="TableListeChapitre">
        <table >
          <caption>Liste des Chapitres </caption>
        <tr>
            <th>Id_Chapitre</th>
            <th>Nom_Chapitre</th>
            <th>Id_Module</th>
        </tr>
        </table> 
      </div>
    </div>
<script src="script.js"></script>
<script src="table.js"></script>
</body>
</html>

voici le code javascript pour création et affichage module:

table.js

 const modules= [

    {idModule: 'M1',nomModule: 'Cohésion_Equipe'},
    {idModule: 'M2',nomModule: 'Intgration_Admin'},

]
console.log('Tableau_Module',modules)
const chapitres= [

   {idChapitre:'C1',nomChapitre:'Presentation',idModule:'M1'},
   {idChapitre:'C2',nomChapitre:'sortie_Equipe',idModule:'M1'},
   {idChapitre:'C3',nomChapitre:'javaScript',idModule:'M2'},
   {idChapitre:'C4',nomChapitre:'Csharp',idModule:'M2'},

 ]
 console.log('Tableau_Chapitre',chapitres)

table.js

function createRow(entree){
//entree:{idModule,nomModule}
        // Creation de l'element ligne 
        const tr=document.createElement('tr')

        const TdIdModule=document.createElement('td')
        //ajouter la valeur de l'idModule dans la const TdIdModule
        TdIdModule.classList.add('idModule')
        //acceder au contenu au format text 
        TdIdModule.innerText=entree.idModule
        //remplir les donnes idModule dans tr
        tr.appendChild(TdIdModule)

        const TdNomModule=document.createElement('td')
        //ajouter la valeur du nomModule dans la const TdNomModule
        TdNomModule.classList.add('nomModule')
        //acceder au contenu au format text
        TdNomModule.innerText=entree.nomModule
        //remplir les donnes nomModule dans tr(ajout de la ligne ds le tab)
        tr.appendChild(TdNomModule)

   return tr
 }

 function createTable(entrees){
// declaration tableau tbody
     const tbody = document.querySelector('.modules')
// charger la const rows par les données de modules
     const rows = entrees.map(e => ({...e}))
// creation table modules
     rows.forEach(entrees => tbody.appendChild(createRow(entrees)))
 }
// appel a la fct createTable et ajout de param modules
createTable(modules)

==> la question est plutôt comment créer la table chapitre en cliquant sur un module

Merci bcp !

EDIT : Ajout des balises de code

A voir également:

Remplir un tableau html avec javascript et le relier a un deuxieme tableau
Tableau croisé dynamique - Guide
Tableau ascii - Guide
Organigramme a remplir word - Guide
Tableau word - Guide
Telecharger javascript - Télécharger - Langages

1 réponse

Réponse 1 / 1

jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650
27 juil. 2020 à 09:01

Bonjour,

Visiblement, pour chaque ligne de module dans ton tableau, tu y ajoutes la class nommodule
Dans ce cas, il suffirait de mettre un eventlistener sur cette class
et lorsque tu cliques sur une des lignes de module, aller chercher le nom du module existant
A partir de là,
Alimenter ton second tableau en pointant sur les chapitres relatifs à ce module.

NB: en ce qui concerne ta variables chapitres, je la ferai un peu différemment histoire de trouver plus rapidement ceux du chapitre qui t'interresse
un truc du genre

const chapitres= 
  {
    'M1':[{idChapitre:'C1',nomChapitre:'Presentation',idModule:'M1'},
          {idChapitre:'C2',nomChapitre:'sortie_Equipe',idModule:'M1'}
          ],
    'M2':[{idChapitre:'C3',nomChapitre:'javaScript',idModule:'M2'},
        {idChapitre:'C4',nomChapitre:'Csharp',idModule:'M2'}]
  };
 
 //Chapitres du module M1:
 console.log(chapitres.M1);

Discussions similaires

ou sont les bananes ?

code couleur associé a une image

exo pix

Discussions similaires

Newsletters