Получить значение из ячейки ввода таблицы HTML с Javascript - PullRequest
Новая
       27

Получить значение из ячейки ввода таблицы HTML с Javascript

0 голосов
/ 22 сентября 2018

Я создал таблицу HTML динамически с Javascript, где первый столбец состоит из текстовых полей, второй столбец состоит из полей ввода, а третий столбец состоит из текстовых полей, что прекрасно работает: 

nrOfRows = document.getElementById("myId").value; //get nrOfRows from input
var i;
var row;
var cell1;
var cell2;
var cell3;

for (i = 0; i < nrOfRows; i++) {

    row = table.insertRow(i); //table is defined earlier
    cell1 = row.insertCell(0);
    cell2 = row.insertCell(1);
    cell3 = row.insertCell(2);
    cell1.innerHTML = "some text"; //Put "some text" in all column1 fields
    cell2.innerHTML = '<input type="text" class="form-control" size="5" maxlength="4" />'; //Make all fields in column2 input fields.

}

После этого я что-то набираю в полях ввода (column2) и пытаюсь взять этот ввод и поместить его в column3, выполнив следующее: 

for (var r = 0; r < nrOfRows; r++) {    
        table.rows[r].cells[2].innerHTML = table.rows[r].cells[1].innerHTML;
    }

Это не работает.Вместо того, чтобы помещать значения из полей ввода в третьем столбце, он заменяет текстовые поля в третьих столбцах новыми полями ввода , как если бы вместо значений использовался HTML-код,

Это работает (перевод значений из column1 в column3): 

  for (var r = 0; r < nrOfRows; r++) {  
        table.rows[r].cells[2].innerHTML = table.rows[r].cells[0].innerHTML;
    }

Любые подсказки о том, как я могу получить значения из полей ввода вместо HTML-кода для него?

Это то, что я получаю.Я хочу, чтобы числа из среднего столбца вошли в правый столбец, но вместо этого он заменяет все новыми полями ввода:

screenshot

1 Ответ

0 голосов
/ 22 сентября 2018

Вы непосредственно получаете доступ к cells[1] и получаете его innerHTML, тогда как у cells[1] есть дочерние элементы, и вам нужно получить к нему доступ value вместо innerHTML, как children[0].value.

Проверить доступ Объекты элемента DOM здесь

Также вы можете использовать querySelector . 

var table;

window.onload = function()
{
table = document.getElementById("test");
nrOfRows = 3;//document.getElementById("myId").value; //get nrOfRows from input
var i;
var row;
var cell1;
var cell2;
var cell3;

for (i = 0; i < nrOfRows; i++) {

    row = table.insertRow(i); //table is defined earlier
    cell1 = row.insertCell(0);
    cell2 = row.insertCell(1);
    cell3 = row.insertCell(2);
    cell1.innerHTML = "some text"; //Put "some text" in all column1 fields
    cell2.innerHTML = '<input type="text" class="form-control" size="5" maxlength="4" />'; //Make all fields in column2 input fields.

}
}

function GetValue()
{
for (var r = 0; r < nrOfRows; r++) {    
        table.rows[r].cells[2].innerHTML = table.rows[r].cells[1].children[0].value;
    }
}
<table id="test" border="1">
</table>

<input type="button" value="Get Value" onclick="GetValue()" />
...