Remplir un tableau html avec javascript et le relier a un deuxieme tableau
yasserbenazzouzi
Messages postés
1
Statut
Membre
-
jordane45 Messages postés 40051 Date d'inscription Statut Modérateur Dernière intervention -
jordane45 Messages postés 40051 Date d'inscription Statut Modérateur Dernière intervention -
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 code javascript pour création et affichage module:
table.js
table.js
==> la question est plutôt comment créer la table chapitre en cliquant sur un module
Merci bcp !
EDIT : Ajout des balises de code
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
- Editeur html - Télécharger - HTML
1 réponse
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
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);
