Come si seleziona una cella di tabella dal suo indice?

Question

So che esiste un modo per accedere agli elementi sequenziali, ma non sono sicuro di come accedervi per indice. C'è un modo per farlo?

Sto cercando qualcosa di simile:

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

Answer 1

Per accedere a una cella con il suo indice di riga e l'indice delle cellule all'interno di tale riga è possibile utilizzare:

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

Questo si accede alla seconda cella (indice 1) nella prima riga (indice 0)

Se si desidera utilizzare solo l'indice delle celle (e non tenere traccia delle righe) e averlo iterato attraverso le celle in ogni riga, è possibile farlo, ma onl y se ogni riga ha lo stesso numero di celle. Il seguente codice accederà alla quarta cella nella tabella (indice 3), sia che si trovi nella riga 0, 1 o 3; a condizione che ogni riga ha lo stesso numero di celle:

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

Per limitare la query ID per l'albero di un elemento è possibile utilizzare querySelector:

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

Ma questo è solo superfluo, quando è possibile semplicemente fare

document.getElementById('cell1'); 

Edit: a risposta migliore alla richiesta di OP, si può accedere in modo sequenziale alle celle di una tabella in questo modo:

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

Viene selezionato il k cellule -esimo del j -esimo riga del corpo -esimo i del tavolo. Se la tabella ha un solo elemento <tbody> (come al solito) o si desidera accedere alle celle indipendentemente dal proprio <tbody>, è possibile omettere la parte .tBodies[i].

Answer 3

Dare la cellula <td> un id:

<td id="mycell"> 

Quindi è possibile accedere all'oggetto DOM utilizzando 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

di una tabella 0.123.639,794 milafornisce l'accesso alle righe. La raccolta .cells di una riga fornisce l'accesso alle celle di quella riga. Entrambi utilizzano l'indicizzazione basata su zero e hanno una proprietà .length. Quindi:

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