Javascript insérer des données dans le tableau HTML

Question

Ceci est une question plutôt simple, j'ai des problèmes pour insérer des données de Javascript dans un tableau HTML.

Voici un extrait de mon JavaScript:

Actualisé - Je ne me suis débarrassé des deux boucles et simplifiées en un seul, mais il y a encore un problème ..

for (index = 0; index < enteredStrings.length; index++) { 
     output.innerHTML += "<td>" + enteredStrings[index] + "</td>" 
     + "<td>" + enteredStringsTwo[index] + "</td>"; 
     nameCounter++; 
     total.innerHTML = "Total: " + nameCounter; 
    } 

Et est ici un sauf de ma page HTML:

<table id="nameTable"> 
    <tr> 
    <th>First</th><th>Last</th> 
    </tr> 

Mise à jour Image:

Answer 1

Essayez ceci (sous la direction):

var tableContent = '<tr>'; 
for (index = 0; index < enteredStrings.length; index++) { 
    tableContent += "<td>" + enteredStrings[index] + "</td>"; 
    nameCounter++; // I don't know if this should be there, 
        // logically the counter should be incremented here as well? 
    total.innerHTML = "Total: " + nameCounter; 
} 
tableContent += '</tr><tr>'; 

for (index = 0; index < enteredStringsTwo.length; index++) { 
    tableContent += "<td>" + enteredStringsTwo[index] + "</td>"; 
    nameCounter++; 
    total.innerHTML = "Total: " + nameCounter; 
} 
tableContent += '</tr>'; 
output.innerHTML += tableContent; 

Edit2 (pour le code question mise à jour):

var tableContent = '<tr>'; 
for (index = 0; index < enteredStrings.length; index++) { 
    tableContent += "<td>" + enteredStrings[index] + "</td>" 
    + "<td>" + enteredStringsTwo[index] + "</td>"; 
    nameCounter++; 
    total.innerHTML = "Total: " + nameCounter; 
} 
tableContent += '</tr>'; 
output.innerHTML += tableContent; 

Edit3 (après avoir regardé le code envoyé par courrier électronique):

var tableContent = ""; 

for (index = 0; index < enteredStrings.length; index++) { 
    tableContent += "<tr><td>" + enteredStrings[index] + "</td>" 

    + "<td>" + enteredStringsTwo[index] + "</td></tr>"; 

    nameCounter++; 
    total.innerHTML = "Total: " + nameCounter; 
} 
output.innerHTML = tableContent; 

Answer 2

au lieu de fermer la td vous ouvrez de nouveaux essayer

for (index = 0; index < enteredStrings.length; index++) { 
    output.innerHTML += "<td>" + enteredStrings[index] + "</td>"; 
    total.innerHTML = "Total: " + nameCounter; 
} 

for (index = 0; index < enteredStringsTwo.length; index++) { 
    output.innerHTML += "<td>" + enteredStringsTwo[index] + "</td>"; 
    nameCounter++; 
    total.innerHTML = "Total: " + nameCounter; 
} 

MISE À JOUR: vous annexant le code HTML à la table au lieu de la ligne. Dans ce cas, le navigateur a créé une ligne pour vous automatiquement après l'ajout de chaque td.

Answer 3

Avec une broche ht modifications dans votre code,

var outputTbl = document.getElementById('nameTable'); 

    var output = document.createElement("tr"); 
    outputTbl.appendChild(output); 

    for (index = 0; index < enteredStrings.length; index++) { 
     output.innerHTML += "<td>" + enteredStrings[index] + "</td>"; 
     total.innerHTML = "Total: " + nameCounter; 
    } 

    for (index = 0; index < enteredStringsTwo.length; index++) { 
     output.innerHTML += "<td>" + enteredStringsTwo[index] + "</td>"; 
     nameCounter++; 
     total.innerHTML = "Total: " + nameCounter; 
    } 

Answer 4

Si vous devez ajouter du code html interne ici.

<table id="nameTable" style="width:300px;"> 
    <tr> 
     <th>First</th><th>Last</th> 
    </tr> 
</table> 

Vous pouvez utiliser Jnerator dans ce cas.

Si ce sont vos données:

var data = [ 
    { first: 'Cole', last: 'Alan'}, 
    { first: 'Michael', last: 'Scott'} 
] 

Vous pouvez les ajouter à la table vous de la manière suivante:

for(var i=0; i<data.length; i++) { 
    var item = data[i]; 
    var row = $j.tr({ child:[$j.td(item.first), $j.td(item.last)] }); 
    nameTable.appendChild(row.dom()); 
} 
nameTotal.innerHTML = 'Total: ' + data.length; 

This is example.