I have the following problem and I have not found a way to solve it. I'm using a dynamically generated table, which consists of 4 columns: a checkbox, text values ​​and a hidden input.

echo "<tr><td><div class='input-containerh'><input type='checkbox'></div></td>";
echo "<td>" .$s. "</td>";
echo "<td>" .$L.  and some vars............    "</td>";
echo "<td><input type='hidden' value=" .  some vars.... "></td>";
echo "</tr>";

As I want to format the checkbox, because in some browsers the cell makes me too big, I use a DIV to format input (checkbox) and it works good for me.

Now the problem is a javascript function that detect if the input was select and now does not work me:

function deleteRow(tableID) {
        try {
        var table = document.getElementById(tableID);
        var rowCount = table.rows.length;

        for(var i=1; i<rowCount; i++) {
            var row = table.rows[i];
            var chkbox = row.cells[0].childNodes[0];
            if(null != chkbox && true == chkbox.checked) {
                table.deleteRow(i);
                rowCount--;
                i--;
            }

Using firebug I found that the problem was:

var chkbox = row.cells[0].childNodes[0];

because it refers to "DIV" not at "input".

How i can reach the "input" element that is within "DIV" and also inside the cell?

Thanks for help.

I have the following problem and I have not found a way to solve it. I'm using a dynamically generated table, which consists of 4 columns: a checkbox, text values ​​and a hidden input.

echo "<tr><td><div class='input-containerh'><input type='checkbox'></div></td>";
echo "<td>" .$s. "</td>";
echo "<td>" .$L.  and some vars............    "</td>";
echo "<td><input type='hidden' value=" .  some vars.... "></td>";
echo "</tr>";

As I want to format the checkbox, because in some browsers the cell makes me too big, I use a DIV to format input (checkbox) and it works good for me.

Now the problem is a javascript function that detect if the input was select and now does not work me:

function deleteRow(tableID) {
        try {
        var table = document.getElementById(tableID);
        var rowCount = table.rows.length;

        for(var i=1; i<rowCount; i++) {
            var row = table.rows[i];
            var chkbox = row.cells[0].childNodes[0];
            if(null != chkbox && true == chkbox.checked) {
                table.deleteRow(i);
                rowCount--;
                i--;
            }

Using firebug I found that the problem was:

var chkbox = row.cells[0].childNodes[0];

because it refers to "DIV" not at "input".

How i can reach the "input" element that is within "DIV" and also inside the cell?

Thanks for help.

• javascript
• html

• 3 row.cells[0].childNodes[0].childNodes[0] or maybe row.cells[0].childNodes[0].getElementsByTagName("input")? – DontVoteMeDown Commented Feb 3, 2014 at 18:53
• try console.log on the row.cells[0].childNodes and navigate your way to the input – aug Commented Feb 3, 2014 at 18:53
• @DontVoteMeDown seems to have it right. Just need to go a level deeper. – Milo LaMar Commented Feb 3, 2014 at 18:54
• @MiloLaMar almost: it should be ...getElementsByTagName("input")[0] – Jan Turoň Commented Feb 3, 2014 at 19:14
• I'm puzzled, I will have tested this code 10 times and did not work, but now it works. Had some error, of course! row.cells[0].childNodes[0].childNodes[0] runs ok! Thank´s. – Javier dc Commented Feb 3, 2014 at 22:59

3 Answers 3

Since the var chkbox = row.cells[0].childNodes[0] worked with this HTML:

<tr><td><input> type='checkbox'></td>

changing the HTML as follows:

<tr><td><div class='input-containerh'><input> type='checkbox'></div></td>

means that row.cells[0].childNodes[0] will now point to the div element. To get the input element inside div, you just access the next level of children with childNodes. So, in a nutshell, you can get access to your input with this:

var chkbox = row.cells[0].childNodes[0].childNodes[0];

(Just a ment)

If you use index to access child nodes, watch out:

<td><input ...></td>

behaves differently than

<td>
  <input ...>
</td>

In the first case, there is only one node in the td. In the second one, there are three: the first one is a text node containing end of line and two spaces, the second one is the HTMLInputElement and the third one is again text node containing end of line.

This is what the HTML looks like, together with the JavaScript objects:

<tr><td><div class='input-containerh'><input type='checkbox'></div></td>
    ^
    |   ^
    |   +--- row.cells[0].firstChild
    |
    +------- row.cells[0]

As you can see, row.cells[0].firstChild points to the <div class="input-containerh">; so you need to go one further:

row.cells[0].firstChild.firstChild