使用Javascript从HTML表格输入单元中获取价值 [英] Get value from HTML table input cell with Javascript

问题描述

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

I have created a HTML table dynamically with Javascript where the first column consists of text fields, the second column consists of input fields and the third column consists of text fields, which works fine:

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）并尝试通过以下方式获取此输入并将其放入第3列：

After this I type something in the input fields (column2) and try to take this input and put it in column3, by doing this:

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

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

This does not work. Instead of putting the values from the input fields in the third column it replaces the text fields in the third columns with new input fields, like it is taking the HTML code instead of the values.

这可行（将第1列中的值输入第3列）：

This works (taking the values from column1 into column3):

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

关于如何从输入字段而不是从输入字段获取值的任何线索

Any clues on how I can get the values from the input fields instead of the HTML code for it?

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

This is what I get. I want the numbers from the middle column to go into the right column, but instead it replaces everything with new input fields:

推荐答案

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

You're directly accessing cells[1] and getting its innerHTML whereas cells[1] has a children and you need to access it value instead of innerHTML like 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()" />

这篇关于使用Javascript从HTML表格输入单元中获取价值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！