Question

I have a table in which I am adding some rows dynamically and in the new rows, I add one input text element. When the text in the input element changes, I wish to access the parent row and do something around it. But my code isn’t able to access the parent node for input element. Following is the code sample. What is the reason for this? Is there some work around?

The creation of row looks something like this:

var newRow = document.createElement('tr');
dojo.place(newRow, row, "after");
var td = document.createElement('td');
dojo.place(td, newRow, 'last');
dojo.attr(td, 'colspan', 2);
dojo.place(document.createTextNode('Track id:'), td, 'last');
var input = document.createElement('input');
dojo.place(input, td, 'last');
dojo.attr(input, 'type', 'text');
dojo.attr(input, 'value', 0);
dojo.attr(input, 'onchange', "JavaScript: onTrackIdChange(event);");

The initial part of onTrackIdChange looks like:

function onTrackIdChange(event)
{
var textbox  = event.target;
console.log(textbox);
// lets find the parent row
var row = findParentRow(btn);

The implementation of findParentRow looks like:

function findParentRow(node)
{
    var parent = node;
    do
    {
        console.log(parent);
        parent = parent.parentNode;
    }
    while (parent.nodeName != 'TR');
    return parent;
}

The findParentRow function fails since it says that parent for the input element is not defined.

Answer 1

In your call, findParentRow(btn), shouldn’t you be passing textbox instead of btn?

There is no reference to this btn variable elsewhere in the code you’ve submitted, so if that’s in order, you should post some more code relating to that.