Как выбрать <td>из <table>с помощью 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;

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

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>

Чтобы объяснить мои намерения более четко> Я хочу сделать игру в крестики-нолики. Для начала я хочу нажать на

и иметь возможность извлечь идентификатор этого конкретного . Как сделать это максимально эффективно?

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

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

Answer 5

Есть много способов сделать это, и это только один из них.

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

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