Как выбрать <td> из <table> с помощью javascript?

Я знаю, что это очень простой вопрос, но я не мог найти ответ нигде. Только ответы - это использование 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;

Что я делаю неправильно? Каков наилучший способ сделать это?

EDIT: У меня действительно есть идентификатор таблицы. Предчувствие глупое знаю. Вот как выглядит мой 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>

Чтобы более ясно объяснить мои намерения > Я хочу сделать игру с тик-таком. Для начала, я хочу нажать на <td> и сможет извлечь идентификатор этого конкретного <td> . Как это сделать наиболее эффективно?

Ответ 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 как следует из названия, просто получает элемент с совпадающим идентификатором, поэтому ваша таблица должна быть похожа на <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); }
    }
}

Попытайся!

Ответ 2

попробуйте document.querySelectorAll("#table td");

Ответ 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 структуру, подобную Array. Итак, вам нужно пройти через возвратные узлы, а затем заполнить вас r, как указано выше.

Ответ 4

Существует много способов сделать это, и это лишь один из них.

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

Ответ 5

Появляются некоторые ответы, предполагающие, что вы хотите получить все <td> элементы из #table. Если это так, самый простой способ перекрестного браузера, как это сделать, - document.getElementById('table').getElementsByTagName('td'). Это работает, потому что getElementsByTagName не возвращает только непосредственных детей. Нет необходимости в циклах.

Ответ 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)
    }
}