Creer un tableau avec un nombre de colonne dynamique

Résolu/Fermé

Adia - 9 févr. 2022 à 07:29
Adia - 9 févr. 2022 à 19:58

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 ?


var html = "<div>"
html += "<table>";
listProjets.forEach(function (proj, i) {
     html += "<tr>";
     html += "<td>" + proj.nom + "</td>;
     html += "</tr>";
})
html += "</table>";

Merci d'avance !

A voir également:

Creer un tableau avec un nombre de colonne dynamique
Tableau croisé dynamique - Guide
Créer un compte google - Guide
Créer un compte gmail - Guide
Comment créer un groupe whatsapp - Guide
Créer un compte instagram sur google - Guide

1 réponse

Réponse 1 / 1

choubaka Messages postés 39413 Date d'inscription jeudi 4 avril 2002 Statut Modérateur Dernière intervention 18 janvier 2025 2 104
9 févr. 2022 à 08:34

Bonjour

Essaye avec une boucle "for"

https://developer.mozilla.org/fr/docs/Web/JavaScript/Guide/Loops_and_iteration

Adia
9 févr. 2022 à 09:10

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 !

Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 525 > Adia
9 févr. 2022 à 13:51

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>';

Adia > Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022
9 févr. 2022 à 19:58

Merci beaucoup !
Ça m'aide beaucoup à avancer. Seulement pour certains nombres de colonnes, ça ne s'affiche pas correctement. Au lieu que les dernières cellules soient vides, certaines cellules en plein milieu sont vides.

En tout cas ça me donne une bonne idée. Merci !

Discussions similaires

créer une adresse gmail pour une autre personne