0 
     <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 元素有什么问题？

4

4 回答 4

5

我将假设您正在尝试获取 row 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>

于 2016-11-18T19:07:47.583 回答
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>

于 2016-11-18T19:07:42.803 回答
1

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

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

要跳过文本节点并仅使用元素节点，请使用children代替childNodes.

function select(x, y) {
  row = matrix.children[x];
  box = row.children[y];
  return box;
}
于 2016-11-18T19:07:30.527 回答
1

而不是使用childNodesuserows和cellsspecific for 表。您还可以使函数更小/更快，将rowandbox变量合并到返回中。

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>

于 2016-11-18T19:09:58.473 回答