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

【问题标题】：Get value from HTML table input cell with Javascript使用 Javascript 从 HTML 表格输入单元格中获取值
【发布时间】：2019-02-26 13:56:15
【问题描述】：

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

这不起作用。它不是将输入字段中的 values 放在第三列中，而是将第三列中的文本字段替换为 new input fields，就像它采用 HTML 代码而不是价值。

这可行（将 column1 中的值放入 column3）：

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

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

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

【问题讨论】：

获取table.rows[r].cells[1].querySelector('input').value
完美运行，谢谢。

标签： javascript input html-table cell

【解决方案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()" />

【讨论】：