Как создать лист меток с именами из массива и отобразить рядом с текстовым полем? - PullRequest
Новая
       15

Как создать лист меток с именами из массива и отобразить рядом с текстовым полем?

0 голосов
/ 11 марта 2019

Я пытаюсь создать лист меток для проекта, в настоящее время работающего над тем, где у меня есть массив имен, таких как 

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 серверасторонний язык.

Кажется, я не понимаю, откуда возникла проблема ..

Ответы [ 2 ]

2 голосов
/ 11 марта 2019

Это больше похоже на то, что вы пытаетесь сделать? 

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

}

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

0 голосов
/ 13 марта 2019

@ Ноа Б Ниже приведены коды, которые я получил от вас, чтобы отобразить таблицы, в которые я внес изменения, abit для соответствия моим требованиям. 

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

Но другая моя проблема в том, что теперь мне нужно извлечь значение каждой строки, и из того, что вы видите, я добавил дополнительный цикл for для отображения другого набора текстовых полей с тем же именем класса, что и у предыдущего.

Например, n1 будет иметь значение 3int, введенное с клавиатуры, и мне нужно вычислить это значение 3 и вернуть его. Это должен быть цикл, который повторяется для каждого имени.

Это коды, которые я написал для получения значения, но он отображает все значения 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...

Заранее спасибо ..

...