Javascript 将数据插入 HTML 表格

Javascript inserting data into HTML table

提问by TheStandardRGB

This is a rather simple question, I am having problems inserting data from Javascript into an HTML table.

这是一个相当简单的问题，我在将数据从 Javascript 插入 HTML 表时遇到问题。

Here is an excerpt of my JavaScript:

这是我的 JavaScript 的摘录：

UPDATED - I got rid of the two loops and simplified it into one, however there is still a problem..

更新 - 我摆脱了两个循环并将其简化为一个，但是仍然存在问题..

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

And here is an except of my HTML page:

这是我的 HTML 页面的一个例外：

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

Updated Picture:

更新图片：

回答by Mahesh Velaga

Try this (edited):

试试这个（已编辑）：

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 (for updated question code):

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 (after looking at the code sent in email):

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;

回答by The Scrum Meister

instead of closing the td you are opening new ones try

而不是关闭 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: you are appendingthe html to the tableinstead of the row. in this case, the browser created a row for you automatically after the each td is appended.

更新：您将html附加到table而不是row。在这种情况下，浏览器会在附加每个 td 后自动为您创建一行。

回答by Chinmayee G

With slight modifications in your 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;
    }

回答by Berezh

If you need to add inner html code here.

如果您需要在此处添加内部 html 代码。

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

You can use Jneratorin this case.

在这种情况下，您可以使用Jnerator。

If this is your data:

如果这是您的数据：

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

You can add them to you table in next way:

您可以通过以下方式将它们添加到您的表中：

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.

这是例子。