html - Javascript access childNode - Stack Overflow

admin 管理员组

文章数量: 1086019

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

Share Improve this question Follow asked Feb 3, 2014 at 18:51 Javier dcJavier dc 57566 silver badges1414 bronze badges 5

• 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

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 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

本文标签： htmlJavascript access childNodeStack Overflow