Javascript access childNode

Question

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.

`row.cells[0].childNodes[0].childNodes[0]` or maybe `row.cells[0].childNodes[0].getElementsByTagName("input")`? — DontVoteMeDown, Feb 03 '14 at 18:53
try `console.log` on the `row.cells[0].childNodes` and navigate your way to the input — aug, Feb 03 '14 at 18:53
@DontVoteMeDown seems to have it right. Just need to go a level deeper. — Milo LaMar, Feb 03 '14 at 18:54
@MiloLaMar almost: it should be `...getElementsByTagName("input")[0]` — Jan Turoň, Feb 03 '14 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, Feb 03 '14 at 22:59

score 3 · Accepted Answer · answered Feb 03 '14 at 18:58

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

answered Feb 03 '14 at 18:58

Gezim

7,112
10
62
98

Hi, thank´s for response. but this does not work properly, text "type='checkbox'" is displayed. Apparently missing a "<" in your code not? – Javier dc Feb 03 '14 at 22:45
Response of – DontVoteMeDown - (and your) childNodes[0].childNodes[0] they runs ok. – Javier dc Feb 03 '14 at 23:01

score 2 · Answer 2 · edited Apr 21 '15 at 18:55

2

(Just a comment)

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.

edited Apr 21 '15 at 18:55

Brad Larson

170,088
45
397
571

answered Feb 03 '14 at 19:11

Jan Turoň

31,451
23
125
169

For over 30 minutes I've been pulling my hair out for this answer. – amallard Aug 04 '16 at 07:07
@amallard there is also ParentNode.children property which returns live collection of nodes, skipping non-Element child nodes: https://developer.mozilla.org/en-US/docs/Web/API/ParentNode/children – Jan Turoň Mar 01 '18 at 09:55

score 1 · Answer 3 · answered Feb 03 '14 at 18:59

1

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

answered Feb 03 '14 at 18:59

Ja͢ck

170,779
38
263
309

I use childNodes, but the theory is the same!. Thx. – Javier dc Feb 03 '14 at 23:03

Javascript access childNode

3 Answers3

Linked