我知道这是一个非常简单的问题,但我无法在任何地方找到答案。只有答案是使用jQuery,而不是纯JS。我已经尝试了下面的代码,它不起作用。我不知道为什么。
var t = document.getElementById("table"),
d = t.getElementsByTagName("tr"),
r = d.getElementsByTagName("td");
这也行不通:
var t = document.getElementById("table"),
d = t.getElementsByTagName("tr"),
r = d.childNodes;
我究竟做错了什么?做这个的最好方式是什么?
编辑:我确实有我的表格的ID。我知道,我很傻。这就是我的HTML看起来的样子:
<table id="table">
<tr>
<td id="c1">1</td>
<td id="c2">2</td>
<td id="c3">3</td>
</tr>
<tr>
<td id="b1">4</td>
<td id="b2">5</td>
<td id="b3">6</td>
</tr>
<tr>
<td id="a1">7</td>
<td id="a2">8</td>
<td id="a3">9</td>
</tr>
</table>
更清楚地解释我的意图>我希望做一个tic tac toe游戏。对于初学者,我希望点击<td>并能够提取特定<td>的id。如何最有效地做到这一点?
这个d = t.getElementsByTagName("tr")
和这个r = d.getElementsByTagName("td")
都是arrays
。 getElementsByTagName
返回一个元素集合,即使在你的比赛中只找到一个元素。
所以你必须这样使用:
var t = document.getElementById("table"), // This have to be the ID of your table, not the tag
d = t.getElementsByTagName("tr")[0],
r = d.getElementsByTagName("td")[0];
根据需要放置数组的索引以访问对象。
请注意,getElementById
作为名称说只是得到匹配id的元素,所以你的表必须像<table id='table'>
和getElementsByTagName
得到标签。
编辑:
好吧,继续这篇文章,我想你可以这样做:
var t = document.getElementById("table");
var trs = t.getElementsByTagName("tr");
var tds = null;
for (var i=0; i<trs.length; i++)
{
tds = trs[i].getElementsByTagName("td");
for (var n=0; n<trs.length;n++)
{
tds[n].onclick=function() { alert(this.id); }
}
}
试试吧!
试试document.querySelectorAll("#table td");
var t = document.getElementById("table"),
d = t.getElementsByTagName("tr"),
r = d.getElementsByTagName("td");
需要是:
var t = document.getElementById("table"),
tableRows = t.getElementsByTagName("tr"),
r = [], i, len, tds, j, jlen;
for ( i =0, len = tableRows.length; i<len; i++) {
tds = tableRows[i].getElementsByTagName('td');
for( j = 0, jlen = tds.length; j < jlen; j++) {
r.push(tds[j]);
}
}
因为getElementsByTagName
返回NodeList
类似阵列的结构。因此,您需要遍历返回节点,然后像上面一样填充r
。
有很多方法可以实现这一点,而这只是其中之一。
$("table").find("tbody td").eq(0).children().first()
开始出现一些答案,假设你想从<td>
获得所有#table
元素。如果是这样,最简单的跨浏览器方式如何做到这一点是document.getElementById('table').getElementsByTagName('td')
。这是有效的,因为getElementsByTagName
不会只返回直接的孩子。不需要循环。
还有rows
和cells
成员;
var t = document.getElementById("tbl");
for (var r = 0; r < t.rows.length; r++) {
for (var c = 0; c < t.rows[r].cells.length; c++) {
alert(t.rows[r].cells[c].innerHTML)
}
}