使用Javascript从HTML表格输入单元中获取价值

Question

我已经使用Javascript动态创建了一个HTML表，其中第一列包含文本字段，第二列包含输入字段，第三列包含文本字段，效果很好：

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

这不起作用。与其从第三栏中的输入字段中输入 values ，不如将第三栏中的文本字段替换为 new输入字段，就像使用HTML代码而不是价值。

这有效（将column1中的值放入column3中）：

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

关于如何从输入字段而不是从HTML代码获取值的任何线索吗？

这就是我得到的。我希望中间一列的数字进入右列，但用新的输入字段代替所有内容：

Answer 1

您直接访问cells[1]并获取其innerHTML，而cells[1]有一个孩子，您需要访问value而不是像innerHTML那样访问children[0].value

在此处检查访问DOM Element Objects

此外，您可以使用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()" />