¿Cómo seleccionar <td> del <table> con javascript?

Sé que esta es una pregunta muy fácil, pero no pude encontrar la respuesta en ningún lado. Solo las respuestas son las que usan jQuery, no JS puro. He intentado el código a continuación y no funciona. No sé por qué.¿Cómo seleccionar <td> del <table> con javascript?

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

Esto también no funciona:

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

¿Qué estoy haciendo mal? ¿Cuál es la mejor manera de hacer esto?

EDIT: De hecho tengo la identificación de mi mesa de la mesa. Preety, tonto, lo sé. Así es como mi HTML se ve:

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

explicar mis intenciones más claramente> Me gustaría hacer un juego de tres en raya. Para empezar, deseo hacer clic en < td> y poder extraer la identificación de ese particular < td>. ¿Cómo hacerlo de manera más eficiente?

Fuente

2011-12-14 oFca

La mejor manera es utilizar una biblioteca, como jQuery –

¿Qué quiere decir con "no funciona"? ¿Realmente tiene un elemento '

' con "tabla" como su atributo "id"? – Pointy

@Shvelo 'Solo las respuestas son las que usan jQuery': está buscando algo que sea solo JavaScript puro. – Pointy

Respuesta

Este d = t.getElementsByTagName("tr") y este r = d.getElementsByTagName("td") son ambos arrays. El getElementsByTagName devuelve una colección de elementos, incluso si solo hay uno encontrado en tu partida.

Así que hay que utilizar la siguiente manera:

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

Coloque el índice de la matriz que desee acceder a los objetos.

Tenga en cuenta que getElementById como su nombre lo dice acaba de obtener el elemento con id emparejado, por lo que la mesa tiene que ser así <table id='table'> y getElementsByTagName obtiene por la etiqueta.

EDIT:

Bueno, continuando con este post, creo que se puede hacer esto:

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

Pruébalo!

Fuente

2011-12-14 16:49:05

+1, pero no ** completamente ** así, porque puede haber más de un 'tr' y más de un' td' – Joe

Para ser pedante, no son arreglos verdaderos, sino 'NodeList's . – BoltClock

@MikeStewart por supuesto, esto es para que aprenda cómo funciona, luego aplica un ciclo o lo que sea que necesite. –

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

Fuente

2011-12-14 16:49:34

Hay muchas maneras de lograr esto, y esto no es más que uno de ellos.

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

Fuente

2011-12-14 16:49:53

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

necesita ser:

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

Debido getElementsByTagName devuelve una matriz de NodeList una estructura similar. Por lo tanto, debe recorrer los nodos de retorno y luego completarlo r como se indica arriba.

Fuente

2011-12-14 16:49:56 Joe

Comienzan a aparecer algunas respuestas que suponen que desea obtener todos los elementos <td> de #table. Si es así, la forma más sencilla de navegador cruzado de hacer esto es document.getElementById('table').getElementsByTagName('td'). Esto funciona porque getElementsByTagName no devuelve solo hijos inmediatos. No se necesitan bucles

Fuente

2011-12-14 16:53:13 duri

También están los miembros rows y 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) 
    } 
}

Fuente

2011-12-14 16:55:32

Cuestiones relacionadas