Javascript Access Childnode

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 hidde

Solution 1:

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><divclass='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];

Solution 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.

Solution 3:

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

<tr><td><divclass='input-containerh'><inputtype='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