Javascript 如何使用javascript选择<table>的<td>？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8508262/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to select <td> of the <table> with javascript?
提问by oFca
I know this is very easy question, but I couldn't find the answer anywhere. Only answers are the ones using jQuery, not pure JS. I've tried the code below and it doesn't work. I don't know why.
我知道这是一个非常简单的问题，但我在任何地方都找不到答案。唯一的答案是使用 jQuery 的，而不是纯 JS。我已经尝试了下面的代码，但它不起作用。我不知道为什么。
var t = document.getElementById("table"),
d = t.getElementsByTagName("tr"),
r = d.getElementsByTagName("td");
This also doesn't work:
这也不起作用：
var t = document.getElementById("table"),
d = t.getElementsByTagName("tr"),
r = d.childNodes;
What am I doing wrong? What is the best way to do this?
我究竟做错了什么？做这个的最好方式是什么？
EDIT: I indeed have the id of my table table. Preety silly I know. This is how my HTML looks:
编辑：我确实有我的表的 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>
To explain my intentions more clearly > I wish to make a tic tac toe game. For starters, I wish to click on the < td > and be able extract the id of that particular < td >. How to do it most efficiently?
更清楚地解释我的意图 > 我想制作一个井字游戏。首先，我希望单击 <td> 并能够提取该特定 <td> 的 id。怎么做最有效率？
回答by
This d = t.getElementsByTagName("tr")and this r = d.getElementsByTagName("td")are both arrays. The getElementsByTagNamereturns an collection of elements even if there's just one found on your match.
这d = t.getElementsByTagName("tr")和这r = d.getElementsByTagName("td")都是arrays。在getElementsByTagName返回元素的集合即使只是一个在你找到匹配。
So you have to use like this:
所以你必须像这样使用：
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];
Place the index of the array as you want to access the objects.
将数组的索引放置在您要访问对象的位置。
Note that getElementByIdas the name says just get the element with matched id, so your table have to be like <table id='table'>and getElementsByTagNamegets by the tag.
请注意，getElementById正如名称所说，只需获取具有匹配 id 的元素，因此您的表必须像<table id='table'>并getElementsByTagName通过标签获取。
EDIT:
编辑：
Well, continuing this post, I think you can do this:
好吧，继续这篇文章，我认为你可以这样做：
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<tds.length;n++)
{
tds[n].onclick=function() { alert(this.innerHTML); }
}
}
Try it!
尝试一下！
回答by Nick Shvelidze
try document.querySelectorAll("#table td");
尝试 document.querySelectorAll("#table td");
回答by Joe
var t = document.getElementById("table"),
d = t.getElementsByTagName("tr"),
r = d.getElementsByTagName("td");
needs to be:
需要是：
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]);
}
}
Because getElementsByTagNamereturns a NodeListan Array-like structure. So you need to loop through the return nodes and then populate you rlike above.
因为getElementsByTagName返回一个NodeList类似数组的结构。所以你需要遍历返回节点，然后r像上面一样填充你。
回答by duri
There begin to appear some answers that assume you want to get all <td>elements from #table. If so, the simplest cross-browser way how to do this is document.getElementById('table').getElementsByTagName('td'). This works because getElementsByTagNamedoesn't return only immediate children. No loops are needed.
开始出现一些答案，假设您想<td>从#table. 如果是这样，最简单的跨浏览器方式是document.getElementById('table').getElementsByTagName('td'). 这是有效的，因为getElementsByTagName不只返回直接的孩子。不需要循环。
回答by Alex K.
There are also the rowsand cellsmembers;
还有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)
}
}
回答by Sameera Thilakasiri
There are a lot of ways to accomplish this, and this is but one of them.
有很多方法可以实现这一点，这只是其中之一。
$("table").find("tbody td").eq(0).children().first()
