如何用數組名稱生成標記表並在旁邊顯示文本框？

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

此段代碼的結果是，我得到了名稱旁邊帶有文本框的重復名稱，但不是全部都在1行中，例如“ 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;
    }

}

這個外部循環獲取每一行的輸入，然后使用您的循環添加它們。

Answer 2

@Noah B下面的代碼是我從您那里獲得的用於顯示表格的代碼，這些表格已經過一些修改以適應我的要求。

for(var i = 0; i<names.length;i++)//retrieve names from the array
    {
        html += "<tr id='row" + i +"'><td style='border:1px solid black;'>"+names[i]+"</td>";
        for(var j=1;j<=2;j++)//amount of textboxes need to be created
        {
            html+= "<td style='border:1px solid black;'><input type='text' class='stdMrk' placeholder='0' value='0' /></td>";

        }
        for(var k=1;k<=1;k++)//display project or final exams txt box
        {
            html+= "<td style='border:1px solid black;'><input type='text' class='stdMrk' placeholder='0' value='0' /></td>";

        }
        html += "</tr>";
    }

但是我的另一個問題是，現在我需要檢索每行的值，並且從您看到的內容中，IVE添加了一個附加的for循環以顯示另一組與上一個類名相同的文本框。

例如n1將有3int值從鍵盤輸入，我必須計算該3value並返回它。 它必須是一個循環，每個名稱都會重復。

這是我編寫的用於檢索值的代碼，但是它顯示所有值1比1，而沒有任何方法知道該值屬於哪一行。

var txtValue = document.getElementsByClassName("stdMrk");
if(txtValue.length>0)
{
    for(var i = 0;i<=y;i++)
    {
        x += parseInt(txtValue[i].value);

    }
    alert(x);
}//edit ive manage to create this but still need to iterate through all the names...

提前致謝..