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

更新：您將 html 附加到表而不是行 。 在這種情況下，瀏覽器會在追加每個td后自動為您創建一行。

Answer 3

如果你需要在這里添加內部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;

這是一個例子 。

Answer 4

只需對代碼稍作修改即可

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