¿Cómo se selecciona una celda de tabla por su índice?

Question

Sé que hay una forma de acceder a los elementos secuenciales, pero no estoy seguro de cómo acceder a ellos por índice. ¿Hay una manera de hacerlo?

Busco algo como:

document.getElementById('table1').cell[1] 

Answer 1

Para acceder a una celda por su índice de la fila y el índice de células dentro de esa fila se puede utilizar:

var rowIndex = 0; 
var cellIndex = 1; 
document.getElementById('table1').rows[rowIndex].cells[cellIndex]; 

Esto se accede a la segunda celda (índice 1) en su primera fila (índice 0)

Si desea simplemente usar el índice de celda (y no realizar un seguimiento de las filas) y hacer que itere a través de las celdas en cada fila, puede hacer esto, pero solo y si cada fila tiene el mismo número de celdas. El siguiente código accedería a la cuarta celda de la tabla (índice 3) ya sea en la fila 0, 1 o 3; siempre que cada fila tiene el mismo número de células:

var cellIndex = 3; 
var table = document.getElementById('table1'); 
var num_columns = table.rows[0].cells.length; 
var cell = table.rows[Math.floor(cellIndex/num_columns)].cells[cellIndex % num_columns]; 

Answer 2

Para restringir la consulta por id al árbol de un elemento que puede utilizar querySelector:

document.getElementById('table1').querySelector('#cell1'); 

Pero eso es sólo redundante cuando pueda simplemente hacer

document.getElementById('cell1'); 

Editar: a una mejor respuesta a la solicitud de OP, se puede acceder secuencialmente a las celdas de una tabla de esta manera:

document.getElementById('table1').tBodies[i].rows[j].cells[k]; 

Esto selecciona el k célula-ésimo de la j fila-ésimo de la i cuerpo -ésimo de la mesa. Si su tabla tiene solo un elemento <tbody> (como es habitual), o si desea acceder a las celdas de forma independiente desde su <tbody>, puede omitir la parte .tBodies[i].

Answer 3

Dar la célula <td> un id:

<td id="mycell"> 

A continuación, se puede acceder al objeto DOM utilizando getElementById():

document.getElementById('mycell'); 

Answer 4

document.querySelector('table td'); //Done. IE8 and above supported. 
            //Only the first one will be selected. 

document.querySelector('#table1 td'); //First cell in #table1 

document.querySelector('#table1 td:nth-child(3)'); //Third cell in #table1 
document.querySelectorAll('#table1 td')[2];  //or this 

Answer 5

de una tabla .rows collection proporciona acceso a las filas. La colección .cells de una fila proporciona acceso a las celdas de esa fila. Ambos usan indexación basada en cero y tienen una propiedad .length. Entonces:

var table = document.getElementById('table1'); 

alert(table.rows.length);    // number of rows 
alert(table.rows[2].cells.length);  // number of cells in row 3 

alert(table.rows[2].cells[5].innerHTML); // contents of 6th cell in 3rd row