Come selezionare <td> di <table> con javascript?

So che questa è una domanda molto facile, ma non ho potuto trovare la risposta da nessuna parte. Solo le risposte sono quelle che usano jQuery, non puro JS. Ho provato il codice qui sotto e non funziona. Non so perché.Come selezionare <td> di <table> con javascript?

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

Anche questo non funziona:

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

Che cosa sto facendo di sbagliato? Qual è il modo migliore per farlo?

MODIFICA: Ho effettivamente l'id del mio tavolo. Preety sciocco lo so. Ecco come il mio HTML appare:

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

di spiegare le mie intenzioni in modo più chiaro> Vorrei fare un gioco tic tac toe. Per cominciare, vorrei fare clic su < td> ed essere in grado di estrarre l'id di quel particolare < td>. Come farlo nel modo più efficiente?

fonte

2011-12-14 oFca

Il modo migliore è usare una libreria, come jQuery –

Cosa intendi con "non funziona"? Hai davvero un elemento '

' con "table" come suo attributo "id"? – Pointy

@Shvelo 'Solo le risposte sono quelle che usano jQuery' - sta cercando qualcosa che sia solo puro JavaScript. – Pointy

risposta

Questo d = t.getElementsByTagName("tr") e questo r = d.getElementsByTagName("td") sono entrambi arrays. Lo getElementsByTagName restituisce una raccolta di elementi anche se ce n'è solo uno trovato nella partita.

Quindi si deve utilizzare in questo modo:

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

Posizionare l'indice della matrice come si desidera accedere agli oggetti.

Si noti che getElementById come dice il nome, basta ottenere l'elemento con ID corrispondente, quindi il proprio tavolo deve essere come <table id='table'> e getElementsByTagName ottenuto dal tag.

EDIT:

Beh, continuando questo post, penso che si può fare questo:

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

Provalo!

fonte

2011-12-14 16:49:05

+1, ma non ** completamente ** come questo, perché ci possono essere più di un 'tr' e più di uno' td' – Joe

Per essere pedanti, non sono veri array, ma 'NodeList's . – BoltClock

@MikeStewart ovviamente, questo è perché impara come funziona, quindi applica un ciclo o qualsiasi altra cosa di cui ha bisogno. –

provare document.querySelectorAll("#table td");

fonte

2011-12-14 16:49:34

Ci sono un sacco di modi per ottenere questo, e questo non è che uno di loro.

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

fonte

2011-12-14 16:49:53

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

deve essere:

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

perché getElementsByTagName restituisce un NodeList una struttura a matrice simile. Quindi è necessario scorrere i nodi di ritorno e quindi compilare come r come sopra.

fonte

2011-12-14 16:49:56 Joe

Iniziano a comparire alcune risposte che presuppongono che si desidera ottenere tutti gli elementi <td> da #table. In tal caso, il modo più semplice di cross-browser su come farlo è document.getElementById('table').getElementsByTagName('td'). Funziona perché getElementsByTagName non restituisce solo i bambini immediati. Non sono necessari loop.

fonte

2011-12-14 16:53:13 duri

Ci sono anche i membri rows e 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) 
    } 
}

fonte

2011-12-14 16:55:32

Problemi correlati