web-dev-qa-db-ja.com

javascriptで<table>の<td>を選択するにはどうすればよいですか？

これは非常に簡単な質問ですが、どこにも答えが見つかりませんでした。答えのみが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>

自分の意図をより明確に説明するには>チックタックトーゲームを作りたい。まず、<td>をクリックして、特定の<td>のIDを抽出できるようにします。最も効率的に行う方法は？

javascripthtml-tableparent-child
13
oFca

このd = t.getElementsByTagName("tr")とこのr = d.getElementsByTagName("td")は両方ともarraysです。 getElementsByTagNameは、一致するものが1つしかない場合でも、要素のコレクションを返します。

したがって、次のように使用する必要があります。

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

それを試してみてください！

18
user898741

document.querySelectorAll("#table td");を試してください

8
Nick Shvelidze
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を追加する必要があります。

3
Joe

これを実現する方法はたくさんありますが、これはそのうちの1つにすぎません。

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

_<td>_からすべての_#table_要素を取得することを前提とするいくつかの回答が表示され始めます。その場合、これを行う最も簡単なクロスブラウザ方法はdocument.getElementById('table').getElementsByTagName('td')です。これは、getElementsByTagNameが直接の子だけを返さないために機能します。ループは必要ありません。

1
duri

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)
    }
}
0
Alex K.