Question

我有以下问题，但我找不到解决问题的方法。我正在使用一个动态生成的表，它包含4列：复选框，文本值和隐藏输入。

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

因为我想格式化复选框，因为在某些浏览器中，单元格使我太大，我使用DIV格式化输入（复选框），它对我有用。

现在问题是一个javascript函数，它检测输入是否被选中，现在不起作用：

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

使用firebug我发现问题是：

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

因为它指的是“DIV”而不是“输入”。

我如何才能到达“DIV”内部以及单元格内的“input”元素？

感谢您的帮助。

Answer 1

由于var chkbox = row.cells[0].childNodes[0]使用此HTML：

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

按如下方式更改HTML：

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

表示row.cells[0].childNodes[0]现在将指向div元素。要获取input内的div元素，您只需访问具有childNodes的下一级别的子级。因此，简而言之，您可以通过以下方式访问input：

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

Answer 2

（只是评论）

如果使用索引访问子节点，请注意：

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

的行为与

不同

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

在第一种情况下，td中只有一个节点。在第二个中，有三个：第一个是包含行尾和两个空格的文本节点，第二个是HTMLInputElement，第三个是包含行尾的文本节点。

Answer 3

这就是HTML的样子，以及JavaScript对象：

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

如您所见，row.cells[0].firstChild指向<div class="input-containerh">;所以你需要更进一步：

row.cells[0].firstChild.firstChild

Javascript访问childNode

3 个答案: