Creer un tableau avec un nombre de colonne dynamique

Résolu
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 ? 


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:

1 réponse

Réponse 1 / 1
choubaka Messages postés 39442 Date d'inscription   Statut Modérateur Dernière intervention   2 105
 
Bonjour

Essaye avec une boucle "for"

https://developer.mozilla.org/fr/docs/Web/JavaScript/Guide/Loops_and_iteration
0
Adia
 
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 !
0
Pitet Messages postés 2826 Date d'inscription   Statut Membre Dernière intervention   527 > Adia
 
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>';
1
Adia > Pitet Messages postés 2826 Date d'inscription   Statut Membre Dernière intervention  
 
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 !
0