Question

---
title: `r title`
author: "your_name"
date: "11/18/2016"
output: pdf_document
---

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

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

但是，当我想在控制台中输出元素时（使用命令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);
}

三者的例子：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

在html表中选择某些内容时，您可以利用表的特殊rows属性以及每行的类似cells属性，

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

＆＃13;

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

＆＃13;

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

＆＃13;

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 个答案: