Je crée une table HTML à partir d'un tableau côté serveur (script google apps; donc Le la sortie ne sort pas comme prévu (voir # 1 ci-dessous). Je peux soit obtenir un tableau dans une colonne (au lieu de chaque élément du tableau en tant que Que dois-je changer dans mes boucles Vous pouvez voir la version qui fonctionne ICI . Index.html tableArray vient de là ). J'ai deux fonctions forEach qui fonctionnent. Cependant, j'essaye d'utiliser deux boucles for à la place car j'aimerais pouvoir ajouter différentes classes à différents . séparé, soit les tableaux sont répétés dans chaque (voir # 2 ci-dessous). for pour obtenir le résultat attendu? 1 (fonctionne avec
forEach ) 2 (ne fonctionne pas avec
for)
function buildTable(tableArray) {
var table = document.getElementById('table');
var tableBody = document.createElement('tbody');
var tbodyID = tableBody.setAttribute('id', 'tbody');
for (var i = 0; i < tableArray.length; ++i) {
var column = tableArray[i];
var colA = column[0];
var colB = column[1];
var colC = column[2];
var colD = column[3];
if (colA != "") {
var row = document.createElement('tr');
for (var j = 0; j < column.length; ++j) {
var cell = document.createElement('td');
cell.appendChild(document.createTextNode(column));
row.appendChild(cell);
}
}
tableBody.appendChild(row);
}
table.appendChild(tableBody);
document.body.appendChild(table);
}
3 Réponses :
// Loop over rows
for (var i = 0; i < tableArr.length; i++) {
var row = tableArr[i];
// loop over columns
for( var j =0; j<row.length; j++){
//create each column and append to row
}
// append row to table body
}
// append table body to DOM
For performance reasons you want to write to the DOM only once and create the table in memory first.
Change
cell.appendChild(document.createTextNode(column[i]));
vers
cell.appendChild(document.createTextNode(column));
Cela le fera parcourir toutes les données de votre colonne correctement au lieu d'ajouter le même contenu de l'ensemble du tableau à plusieurs reprises.
Au lieu de la ligne cell.appendChild(document.createTextNode(column));
écrivez cell.appendChild(document.createTextNode(column[j ));
Vous avez oublié d'ajouter l'index [j