时间戳

首页 > 解决方案 > 使用 Javascript 从 HTML 表格输入单元格中获取值

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

问题描述

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

这不起作用。它不是将输入字段中的值放在第三列中，而是将第三列中的文本字段替换为新的输入字段，就像它使用 HTML 代码而不是值一样。

这有效（将 column1 中的值取到 column3 中）：

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

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

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

截屏

标签： javascriptinputhtml-tablecell

解决方案

您直接访问cells[1]并获取它的 innerHTML 而cells[1]有一个孩子，您需要访问它value而不是innerHTMLlike 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()" />

推荐阅读