javascript - 使用 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.

}

在此之后，我在输入字段(第 2 列)中键入一些内容，然后尝试获取此输入并将其放入第 3 列，方法是:

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

这是行不通的。它不是将输入字段中的值放在第三列中，而是用新输入字段替换第三列中的文本字段，就像它采用 HTML 代码而不是值(value)。

这行得通(将 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] 有一个 child ，您需要访问它的 value 而不是像 children[0].value 这样的 innerHTML。

检查访问 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()" />