ste*_*ess 0 html javascript dom child-nodes
<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>