Get value from HTML table input cell with Javascript

问题

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.

}

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

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.

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:

screenshot

回答1:

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.

Check accessing DOM Element Objects here

Also, you can use 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()" />

来源：https://stackoverflow.com/questions/52455876/get-value-from-html-table-input-cell-with-javascript

标签

javascript

input

html-table

cell