Jak wybrać <td> z <table> z javascript?

Wiem, że to bardzo łatwe pytanie, ale nigdzie nie mogłem znaleźć odpowiedzi. Jedynymi odpowiedziami są te, które używają jQuery, a nie czystego JS. Próbowałem kodu poniżej i to nie działa. Nie wiem dlaczego.Jak wybrać <td> z <table> z javascript?

var t = document.getElementById("table"), 
    d = t.getElementsByTagName("tr"), 
    r = d.getElementsByTagName("td");

To także nie działa:

var t = document.getElementById("table"), 
    d = t.getElementsByTagName("tr"), 
    r = d.childNodes;

Co robię źle? Jaki jest najlepszy sposób na zrobienie tego?

EDYCJA: Rzeczywiście mam identyfikator mojego stołu. Preety, głupi, wiem. Jest to, jak wygląda mój 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>

Aby wyjaśnić moje intencje wyraźniej> pragnę złożyć Tic Tac Toe. Na początek chciałbym kliknąć na < td> i być w stanie wyodrębnić identyfikator tego konkretnego < td>. Jak to zrobić najskuteczniej?

Źródło

2011-12-14 oFca

Najlepszym sposobem jest użycie biblioteki, takiej jak jQuery –

Co masz na myśli przez "nie działa"? Czy naprawdę masz element '

' z "table" jako jego atrybutem "id"? – Pointy

@Shvelo 'Tylko odpowiedzi używają jQuery' - szuka czegoś, co jest po prostu czystym JavaScriptem. – Pointy

Odpowiedz

Ten d = t.getElementsByTagName("tr") i ten r = d.getElementsByTagName("td") są zarówno arrays. getElementsByTagName zwraca kolekcję elementów, nawet jeśli znaleziono tylko jedną z nich.

Więc trzeba używać tak:

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];

Umieść indeksu tablicy, jak chcesz, aby uzyskać dostęp do obiektów.

Zauważ, że getElementById jak sama nazwa mówi, po prostu element z dopasowane id, więc stół musi być jak <table id='table'> i getElementsByTagName dostaje przez znacznik.

EDIT:

Dobrze, kontynuując ten post, myślę, że można to zrobić:

var t = document.getElementById("table"); 
var trs = t.getElementsByTagName("tr"); 
vat 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); } 
    } 
}

Spróbuj!

Źródło

2011-12-14 16:49:05

+1, ale nie ** w pełni ** to lubię, ponieważ może być więcej niż jeden 'tr' i więcej niż jeden' td' – Joe

Aby być pedantycznym, nie są to prawdziwe tablice, ale 'NodeList's . – BoltClock

@MikeStewart oczywiście, dlatego, że uczy się jak to działa, a następnie stosuje pętlę lub cokolwiek potrzebuje. –

spróbować document.querySelectorAll("#table td");

Źródło

2011-12-14 16:49:34

Istnieje wiele sposobów, aby to osiągnąć, a to jest tylko jeden z nich.

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

Źródło

2011-12-14 16:49:53

var t = document.getElementById("table"), 
    d = t.getElementsByTagName("tr"), 
    r = d.getElementsByTagName("td");

musi być:

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

Ze względu getElementsByTagName Zwraca NodeList strukturę tablicy podobne. Musisz więc przechodzić przez węzły zwrotne, a następnie zapełniać Cię tak, jak powyżej.

Źródło

2011-12-14 16:49:56 Joe

Pojawiają się niektóre odpowiedzi, które zakładają, że chcesz uzyskać wszystkie elementy <td> z . Jeśli tak, najprostszym sposobem w jaki sposób to zrobić, to document.getElementById('table').getElementsByTagName('td'). Działa to ponieważ getElementsByTagName nie zwraca tylko bezpośrednich dzieci. Żadne pętle nie są potrzebne.

Źródło

2011-12-14 16:53:13 duri

Dostępne są również elementy rows i 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) 
    } 
}

Źródło

2011-12-14 16:55:32

Powiązane problemy