Creer un tableau avec un nombre de colonne dynamique
Résolu
Adia
-
Adia -
Adia -
Bonjour.
J'ai besoin d'aide. Je voudrais créer un tableau avec un nombre de colonne dynamique. L'utilisateur choisit le nombre de colonne, et à partir de ce nombre je dois faire l'affichage du tableau. Je ne sais pas trop comment m'y prendre.
Pouvez-vous me donner des indices, des idées s'il vous plaît ?
Merci d'avance !
J'ai besoin d'aide. Je voudrais créer un tableau avec un nombre de colonne dynamique. L'utilisateur choisit le nombre de colonne, et à partir de ce nombre je dois faire l'affichage du tableau. Je ne sais pas trop comment m'y prendre.
Pouvez-vous me donner des indices, des idées s'il vous plaît ?
var html = "<div>"
html += "<table>";
listProjets.forEach(function (proj, i) {
html += "<tr>";
html += "<td>" + proj.nom + "</td>;
html += "</tr>";
})
html += "</table>";
Merci d'avance !
1 réponse
-
Bonjour
Essaye avec une boucle "for"
https://developer.mozilla.org/fr/docs/Web/JavaScript/Guide/Loops_and_iteration
-
Oui. Je peux faire avec for aussi. Mais mon problème est que je ne sais pas comment m'y prendre pour créer le tableau dynamique. Avec le code que je viens de fournir, j'affiche juste une colonne. Mais l'utilisateur doit avoir le choix pour le nombre de colonne qui doit s'afficher.
Par exemple : si l'utilisateur choix 4 et que listeProjet = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j'];
On doit afficher le tableau comme suit:
Sur la 1ere ligne (4 colonnes) : a, b, c, d
Sur la 2eme ligne (4 colonnes) : e, f, g, h
Sur la 3eme ligne : i, j
J'ai pu déterminer comment trouver le nombre de ligne
var nombreLigne;
if (nombreLigne % nombreColonne === 0) {
nombreLigne = listProjets /nombreColonne;
} else {
nombreLigne = Math.floor(listProjets / nombreColonne) + 1;
}
Maintenant je connais le nombre de ligne, le nombre de colonne, le nombre d'éléments à afficher dans le tableau.
Comment faire pour créer le tableau avec ces éléments ?
Merci !- Bonjour,
Une piste possible :const colCount = 4; const listeProjet = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j']; let html = ''; html += '<table>'; for (let i = 0; i < listeProjet.length; i += colCount) { html += '<tr>'; html += listeProjet.slice(i, i + colCount).map(projet => { return '<td>' + projet + '</td>'; }).join(''); html += '</tr>'; } html += '</table>';
-
