无法使用Javascript选择HTML元素

Question

     <body>
    <table id="table_x">
        <tbody>
            <tr>
                <td></td>                         
                <td>this box should be selected</td>
                <td></td>
                <td></td>
           </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </tbody>
     </table>
  </body>

使用以下javascript代码，我想在ID为“ table_x”的表的第一行中选择第二个“框”：

        var matrix = document.querySelector("#table_x");
        var row;
        var box;

        function select(x,y){
            row = matrix.childNodes[x];
            box = row.childNodes[y];
            return box;
        }

        var test = select(0,1);

但是，当我想在控制台中输出元素时（使用命令console.log（test）;），我只是返回“未定义”。 我选择html元素怎么了？

Answer 1

我假设您尝试获取第x行，然后从中获取单元格y 。 （我将y用于行，将x用于单元格，但是您的代码似乎相反。）

如果是这样，则您不希望使用childNodes因为它不仅包括元素，还包括注释节点，文本节点等。

另外，您需要确保matrix引用的是tbody元素，而不是table元素。

然后，您可以使用其中任何一个； 请注意，其中之一甚至不需要matrix变量：

function select1(x, y) {
  return matrix.children[x].children[y];
}

function select2(x, y) {
  return matrix.rows[x].cells[y];
}

function select3(x, y) {
  var selector = "#table_x tr:nth-child(" + (x + 1) + ") > td:nth-child(" + (y + 1) + ")";
  return document.querySelector(selector);
}

所有三个示例：

 var matrix = document.querySelector("#table_x tbody"); function select1(x, y) { return matrix.children[x].children[y]; } function select2(x, y) { return matrix.rows[x].cells[y]; } function select3(x, y) { var selector = "#table_x tr:nth-child(" + (x + 1) + ") > td:nth-child(" + (y + 1) + ")"; return document.querySelector(selector); } select1(0, 0).style.color = "blue"; select2(1, 1).style.color = "green"; select3(2, 2).style.color = "red";

 <table id="table_x"> <tbody> <tr> <td>x</td> <td>x</td> <td>x</td> <td>x</td> </tr> <tr> <td>x</td> <td>x</td> <td>x</td> <td>x</td> </tr> <tr> <td>x</td> <td>x</td> <td>x</td> <td>x</td> </tr> <tr> <td>x</td> <td>x</td> <td>x</td> <td>x</td> </tr> </tbody> </table>

Answer 2

在html表格中选择内容时，您可以利用表格的特殊rows属性和每一行的相似cells属性，

这是您函数的更新版本（添加了id参数）：

  function select(x, y, id) { var matrix = document.getElementById(id) var row = matrix.rows[x]; var box = row.cells[y]; return box; } var test = select(0, 1, 'table_x').style.color = 'red';

 <table id="table_x"> <tbody> <tr> <td></td> <td>this box should be selected</td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> </tr> </tbody> </table>

Answer 3

DOM元素可以同时包含元素节点和文本节点。

table_x的第一个子节点是空白文本节点， 而不是 TBODY元素。

要跳过文本节点，只有元素节点的工作，用children来代替childNodes 。

function select(x, y) {
  row = matrix.children[x];
  box = row.children[y];
  return box;
}

Answer 4

代替使用childNodes使用表专用的rows和cells 。 您还可以使函数变小/变快，将row和box变量合并到返回中。

 var matrix = document.getElementById("table_x"); function select(x,y){ return matrix.rows[x].cells[y]; } var test = select(0,1); console.log(test);

 <body> <table id="table_x"> <tbody> <tr> <td></td> <td>this box should be selected</td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> </tr> </tbody> </table> </body>

无法使用Javascript选择HTML元素

问题描述

4 个解决方案

解决方案1
5 已采纳 2016-11-18 19:07:47

解决方案2
2 2016-11-18 19:07:42

解决方案3
1 2016-11-18 19:07:30

解决方案4
1 2016-11-18 19:09:58

无法使用Javascript选择HTML元素

问题描述

4 个解决方案

解决方案1 5 已采纳 2016-11-18 19:07:47

解决方案2 2 2016-11-18 19:07:42

解决方案3 1 2016-11-18 19:07:30

解决方案4 1 2016-11-18 19:09:58

解决方案1
5 已采纳 2016-11-18 19:07:47

解决方案2
2 2016-11-18 19:07:42

解决方案3
1 2016-11-18 19:07:30

解决方案4
1 2016-11-18 19:09:58