JavaScript访问子节点

Question

JavaScript访问子节点

3

我有以下问题，一直没有找到解决办法。我正在使用一个动态生成的表格，它由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”而不是“input”。

我如何访问位于“DIV”内部且也在单元格内的“input”元素？

谢谢帮助。

- Javier dc

3

row.cells[0].childNodes[0].childNodes[0] 或者 row.cells[0].childNodes[0].getElementsByTagName("input")？这句话的意思是：在一个表格行中，获取第一列的第一个子元素的第一个子元素，或者获取第一列的第一个子元素中所有标签名为 "input" 的元素。 - DontVoteMeDown

尝试在 row.cells[0].childNodes 上使用 console.log，并导航到输入。 - aug

@DontVoteMeDown 似乎说得对。只需要再深入一层。 - Milo LaMar

@MiloLaMar 差不多了：应该是 ...getElementsByTagName("input")[0]。 - Jan Turoň

我很困惑，我已经测试了这段代码10次，但是之前没有成功，而现在它却可以用了。当然有一些错误！row.cells[0].childNodes[0].childNodes[0] 正常运行了！谢谢。 - Javier dc

3个回答

2

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

（只是一条注释）

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

与...的行为不同

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

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

- Jan Turoň

我已经为这个答案苦苦思索了30多分钟。 - amallard

@amallard 还有 ParentNode.children 属性，它返回节点的实时集合，跳过非元素子节点：https://developer.mozilla.org/zh-CN/docs/Web/API/ParentNode/children - Jan Turoň

1

这是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

- Ja͢ck

我使用childNodes，但理论是相同的！谢谢。 - Javier dc

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Gezim · Accepted Answer

在这个 HTML 中, var chkbox = row.cells[0].childNodes[0] 可以使用：

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

更改HTML如下：

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

这意味着row.cells [0] .childNodes [0]现在将指向div元素。要获取div内部的input元素，只需使用childNodes访问下一级子元素。因此，简而言之，您可以使用以下代码访问input：

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