javascript - 如何使用数组中的名称生成标记表并在旁边显示文本框？

Question

我正在尝试为当前正在处理的项目创建一个标记表，其中我有一系列名称，例如

var names = ["n1","n2","n3","n4","n5","n6","n7","n8"];

我想在表列中显示名称并生成在循环中定义的大量文本框，但到目前为止我无法在名称旁边并排显示文本框。

    html+= "<table>";
    html+= "<table style='border:1px solid black;'><tr><th>Student Name</th><th>ICA's</th>";
    for(var i = 0; i<=names.length;i++)//retrieve names from the array
    {
        for(var j=1;j<=2;j++)//amount of textboxes need to be created
        {
            html+= ("<tr><td id='tableTD'>"+names[i]+"</td><td>"+txtBox+"</td></tr></table>");
        }
    }
    display.innerHTML = html;
}

这一段代码的结果是，我得到了名称的重复项，旁边有文本框，但并非全部都在 1row 中，例如“n1: textbox1, textbox2”

我必须在表格中显示所有内容，并且仅限于 html 和 javascript，没有服务器端语言的 jquery。

我似乎无法理解问题出在哪里..

Answer 1

这更像是您想要做的事情吗？

html = "<table>";
html+= "<tr><th>Student Name</th><th>ICA-1/th><th>ICA-2</th><th>Total</th></tr>";
for(var i = 0; i<=names.length;i++)//retrieve names from the array
{
    html += "<tr id='row" + i +"'><td>"+names[i]+"</td>";

    for(var j=1;j<=2;j++)//amount of textboxes need to be created
    {
        html+= "<td>"+txtBox+"</td>";
    }
    html += "<td id='total" + i "'>&nbsp;</td></tr>";
}
html += "</table>";
display.innerHTML = html;

基于以下进一步问题的附加代码:(上面和下面的附加编辑以向每行添加总计)

for (let row=0; row<names.length; row++) 
{ 
    let txtValue=document.querySelectorAll("#row" + row + " .stdMrk");
    if(txtValue.length>0)
    {
        let rowTotal = 0;
        for(var i = 0;i<=y;i++)
        {
            rowTotal += parseInt(txtValue[i].value);

        }
        //alert(rowTotal);
        document.querySelector("#total" + row).innerHTML = rowTotal;
    }

}

这个外部循环获取每行的输入，然后使用循环添加它们。