<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 元素有什么问题吗？
最佳答案
我假设您正在尝试获取行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>关于javascript - 无法使用 Javascript 选择 HTML 元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40684214/