Question

这是我项目的一小段代码。那么这里我只是获取表的第一行元素的id，但是有一些错误的获取div的id和选择标记？有人可以帮我吗？

<html>
  <head>
    <script>
        function add(tableID) {        
            var table = document.getElementById(tableID);         
            var colCount = table.rows[0].cells.length;

            alert("cell length "+colCount);

            for(var i=0; i<colCount; i++) {
                alert(table.rows[0].cells[i].childNodes[0].id);
            }               
        }
    </script>
  </head>
  <body>
    <table border="1" id="dataTable" >
      <tr>
        <td><INPUT type="checkbox" id="cb" name="chk[]" disabled="true"/></td>
        <td><input type="text" id="txt" name="t" size="3" maxlength="3" readonly="true" value="1"></td>
        <td>
          <select  id='slct'>
            <option value='-1' selected>- - - - - Select - - - - -</option>
            <option value="0">xyz</option>
          </select>
        </td>
        <td>                
          <div id="div">qwerty</div>
        </td>
      </tr>
    </table>

    <br>

    <button onclick="add('dataTable')">show</button>
  </body>
</html>

Answer 1

标签之间的任何字符，甚至是空格，都是HTML文本节点（一行中的多个非标签字符都合并为一个节点）。这意味着第三个和第四个TD的第一个（也是最后一个）子节点都是文本节点（只有空格）。

table.rows[0].cells[0].childNodes.length === 1
table.rows[0].cells[1].childNodes.length === 1
table.rows[0].cells[2].childNodes.length === 3
table.rows[0].cells[3].childNodes.length === 3

如果您将HTML修改为此...

<td><select  id='slct'>
    <option value='-1' selected>- - - - - Select - - - - -</option>
    <option value="0">xyz</option>
 </select></td>
 <td><div id="div">qwerty</div></td>

你会从你的javascript中获得预期的行为。

Answer 2

问题很简单，排除方法也很简单。

尝试将childNodes记录到控制台：

for(var i=0; i<colCount; i++) {
    console.log(table.rows[0].cells[i].childNodes);
}

您将看到每个单元格中的第一个childNode是textNode。这是源于换行符。

使用children代替排除textNodes

for (var i = 0; i < colCount; i++) {        
    console.log(table.rows[0].cells[i].children[0].id);
 }

的 DEMO

无法识别DIV ID？

2 个答案: