Jak wybrać komórkę tabeli według jej indeksu?

Question

Wiem, że istnieje sposób dostępu do elementów sekwencyjnych, ale nie jestem pewien, jak uzyskać do nich dostęp przez indeks. Czy jest jakiś sposób na zrobienie tego?

szukam czegoś podobnego:

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

Answer 1

Aby uzyskać dostęp do komórki przez indeksie wiersza i indeksu komórek w tym wierszu można użyć:

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

ten będzie miał dostęp drugą komórkę (indeks 1) w pierwszym wierszu (indeks 0)

Jeśli chcesz po prostu użyć indeksu komórki (i nie śledzić wierszy) i zlecić iterację w komórkach w każdym wierszu, możesz to zrobić, ale onl y, jeśli każdy wiersz ma taką samą liczbę komórek. Poniższy kod miałby dostęp do czwartej komórki w tabeli (indeks 3), niezależnie od tego, czy jest to wiersz 0, 1, czy 3; tak długo, jak każdy wiersz ma taką samą liczbę komórek:

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

ograniczyć zapytanie przez ID na drzewie elementu można wykorzystać querySelector:

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

Ale to tylko zbędny, kiedy można po prostu zrobić

document.getElementById('cell1'); 

Edycja: do lepszej odpowiedzi na żądanie OP, można przejść kolejno do komórek tabeli w następujący sposób:

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

ten wybiera k tej komórki z j -tym rzędzie i -tym ciała tabeli. Jeśli tabela ma tylko jeden element <tbody> (jak zwykle) lub chcesz uzyskać dostęp do komórek niezależnie od ich <tbody>, możesz pominąć część .tBodies[i].

Answer 3

Daj komórce <td> id:

<td id="mycell"> 

Następnie można uzyskać dostęp do obiektu DOM za pomocą 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

tabeli, .rows collection zapewnia dostęp do wierszy. Kolekcja wiersza .cells zapewnia dostęp do komórek tego wiersza. Oba używają indeksowania od zera i mają właściwość .length. A więc:

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