Javascript, вставляющий данные в таблицу HTML

Question

Это довольно простой вопрос, у меня возникают проблемы с вставкой данных из Javascript в таблицу HTML.

Вот отрывок из моего JavaScript:

ОБНОВЛЕНО - Я избавилась от двух петель и упростили его в один, однако есть еще проблема ..

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

А вот кроме моего HTML страницы:

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

Обновлено Изображение:

Answer 1

Попробуйте это (под редакцией):

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 (для обновленного кода вопроса):

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 (после того, как смотреть на код, посылаемый по электронной почте):

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

вместо закрытия TD вы открываете новые попробовать

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

UPDATE: вы добавление HTML, к таблице вместо строки. , в этом случае браузер автоматически создавал строку после каждого добавления td.

Answer 3

С slig ht изменения в вашем коде,

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

Если вам нужно добавить внутренний html-код здесь.

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

Вы можете использовать Jnerator в этом случае.

Если это ваши данные:

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

Вы можете добавить их к вам таблицу в следующем виде:

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.