3
votes

double forEach pour doubler for Loop

Je crée une table HTML à partir d'un tableau côté serveur (script google apps; donc 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 .

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 séparé, soit les tableaux sont répétés dans chaque (voir # 2 ci-dessous).

Que dois-je changer dans mes boucles for pour obtenir le résultat attendu?

Vous pouvez voir la version qui fonctionne ICI .

1 (fonctionne avec forEach )

 enter image description here

2 (ne fonctionne pas avec for)

saisissez la description de l'image ici

Index.html

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);
}


0 commentaires

3 Réponses :


2
votes
// 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.

0 commentaires

2
votes

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.


0 commentaires

3
votes

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


0 commentaires