如何选择 of the with javascript?

Question

我知道这是一个非常简单的问题，但我无法在任何地方找到答案。只有答案是使用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。如何最有效地做到这一点？

Answer 1

这个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); }
    }
}

试试吧！

Answer 2

试试document.querySelectorAll("#table td");

Answer 3

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。

Answer 4

有很多方法可以实现这一点，而这只是其中之一。

$("table").find("tbody td").eq(0).children().first()

Answer 5

开始出现一些答案，假设你想从<td>获得所有#table元素。如果是这样，最简单的跨浏览器方式如何做到这一点是document.getElementById('table').getElementsByTagName('td')。这是有效的，因为getElementsByTagName不会只返回直接的孩子。不需要循环。

Answer 6

还有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)
    }
}