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

yasserbenazzouzi Messages postés 1 Date d'inscription Statut Membre Dernière intervention -
jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention - 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:

Afficher un tableau javascript en html
Tableau word - Guide
Trier un tableau excel - Guide
Tableau ascii - Guide
Imprimer un tableau excel - Guide
Tableau croisé dynamique - Guide

1 réponse

Réponse 1 / 1

jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752

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

Impossible d'afficher le rapport de tableau croisé dynamique sur un rapport

affichage tableau sous C

Formule taux de marque

la balise <br> ou <br />

Votre réponse

Discussions similaires