Extracting data from a dynamic html table using DOM

Question

First I wanna say that I'm new to javascript so this may look as a simple problem. I'm tring to extract data from a dynamically generated html table( table id ="tableId") using DOM. Each cell of the table includes an input field to get user input. The problem is below javascript returns "null" always when retrieving the input field value. What I'm doing wrong here?

var mytable       = document.getElementById('tableId');
var mytablebody = mytable.getElementsByTagName("tbody")[0];

var myrow   = mytablebody.getElementsByTagName("tr")[0];
    var cell = myrow.getElementsByTagName("td")[0];
    var inputNode = cell.childNodes[0];
    var taskName  = inputNode.nodeValue; //??

    document.write("Task Name:" + taskName);

Thaks in Advance

Marc B · Accepted Answer · 2011-11-04 16:13:11Z

1

You could do

var inputs = document.getElementById('tableID').getElementsByTagName('input');
for (var i = 0; i < inputs.length; i++) {
    alert(inputs[i].value);
}

text input fields (unless it's a textarea), don't really have a .nodeValue. The data entered into the form field is stored in .value.

answered Nov 4, 2011 at 16:13

Marc B

362k44 gold badges433 silver badges508 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Extracting data from a dynamic html table using DOM

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related