Get value from HTML table input cell with Javascript

Question

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

get table.rows[r].cells[1].querySelector('input').value

user5734311
– user5734311

2018-09-22 10:45:18 +00:00
Commented Sep 22, 2018 at 10:45 — user5734311
– user5734311, Commented Sep 22, 2018 at 10:45
Works perfectly, thank you.

Perry
– Perry

2018-09-22 10:55:02 +00:00
Commented Sep 22, 2018 at 10:55 — Perry
– Perry, Commented Sep 22, 2018 at 10:55

Hary · Accepted Answer · 2018-09-22 10:53:23Z

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()" />

Collectives™ on Stack Overflow

Get value from HTML table input cell with Javascript

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related