Comment créer une table en utilisant une boucle?

Vous pouvez le faire avec des boucles imbriquées – une pour ajouter des cellules à chaque ligne et une pour ajouter des lignes à la table. JSFiddle

 var table = document.createElement('table'), tr, td, row, cell; for (row = 0; row < 10; row++) { tr = document.createElement('tr'); for (cell = 0; cell < 22; cell++) { td = document.createElement('td'); tr.appendChild(td); td.innerHTML = row * 22 + cell + 1; } table.appendChild(tr); } document.getElementById('container').appendChild(table); 

Alternativement , vous pouvez créer une rangée vide de 22 cellules, cloner 10 fois, puis ajouter les nombres aux cellules.

 var table = document.createElement('table'), tr = document.createElement('tr'), cells, i; for (i = 0; i < 22; i++) { // Create an empty row tr.appendChild(document.createElement('td')); } for (i = 0; i < 10; i++) { // Add 10 copies of it to the table table.appendChild(tr.cloneNode(true)); } cells = table.getElementsByTagName('td'); // get all of the cells for (i = 0; i < 220; i++) { // number them cells[i].innerHTML = i + 1; } document.getElementById('container').appendChild(table); 

Et une troisième option : ajoutez les cellules dans une seule boucle, en créant une nouvelle ligne toutes les 22 cellules.

 var table = document.createElement('table'), tr, td, i; for (i = 0; i < 220; i++) { if (i % 22 == 0) { // every 22nd cell (including the first) tr = table.appendChild(document.createElement('tr')); // add a new row } td = tr.appendChild(document.createElement('td')); td.innerHTML = i + 1; } document.getElementById('container').appendChild(table); 

Il existe de nombreuses façons de le faire, mais j'ai trouvé utile de créer un fragment puis d'y ajouter tout. C'est rapide et limite les remaniements DOM / ré-flux d'une boucle.

Jetez un oeil à cet exemple de jsbin .

Voici le code modifié:

 function newNode(node, text, styles) { node.innerHTML = text; node.className = styles; return node; } var fragment = document.createDocumentFragment(), container = document.getElementById("container"); for(var i = 1; i <= 10; i++) { var tr = document.createElement("tr"); var td = newNode(document.createElement("td"), i, "cell"); tr.appendChild(td); fragment.appendChild(tr); } container.appendChild(fragment); 

Vous pouvez modifier ce que vous voulez dans la boucle, mais cela devrait vous aider à démarrer.

C'est parce que le DOM enveloppe un élément <tbody> autour de lignes de tables errantes dans votre table, tel qu'il est conçu pour le faire . Heureusement, vous pouvez réécrire votre boucle d'une manière qui ajoutera toutes ces lignes de table à la fois, plutôt que l'une à la fois.

La solution la plus simple pour ce faire serait de stocker une variable de chaîne et de concaténer vos lignes sur celle-ci. Ensuite, après avoir concaté vos lignes ensemble en une seule chaîne, vous pouvez définir le innerHTML de votre élément de table dans cette chaîne comme ceci:

 <script> (function() { var rows = ''; for( var i = 0; i <= 10; i++ ) { rows += '<tr id = "row' + i + '"><td>...</td></tr>'; } document.getElementById( 'table' ).innerHTML = rows; }()); </script> 

Voici un jSFiddle qui démontre ce que je viens d'écrire. Si vous inspectez le HTML à l'aide des outils de développement de votre navigateur, vous remarquerez qu'un (et un seul) tbody toutes les lignes de votre table.

En outre, si vous vous demandez, la fonction étrange qui se cache autour de ce code est simplement une façon fantastique de garder les variables que vous avez créées devenues globales (parce qu'elles n'ont pas besoin d'être). Consultez cette publication sur le blog pour plus de détails sur la façon dont cela fonctionne.