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>

更清楚地解释我的意图＆gt;我想做一个tic tac toe游戏。对于初学者，我希望点击＆lt; td＆gt;并且能够提取特定的＆lt; td＆gt;。如何最有效地做到这一点？

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

如何选择使用javascript？<table> </table>

6 个答案: