Wie wählen Sie eine Tabellenzelle nach ihrem Index aus?

Question

Ich weiß, dass es eine Möglichkeit gibt, auf sequentielle Elemente zuzugreifen, aber ich bin mir nicht sicher, wie ich auf sie per Index zugreifen soll. Gibt es einen Weg, es zu tun?

Ich bin auf der Suche nach so etwas wie:

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

Answer 1

Um eine Zelle durch seinen Zeilenindex und Zellindex Sie können innerhalb dieser Zeile zuzugreifen:

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

Dies wird die zweite Zelle zugreifen (Index 1) in der ersten Zeile (Index 0)

Wenn Sie nur Zellenindex verwenden (und Zeilen nicht verfolgen) und es durch die Zellen in jeder Zeile durchlaufen möchten, können Sie dies tun, aber onl y wenn jede Reihe die gleiche Anzahl von Zellen hat. Der folgende Code würde auf die vierte Zelle in der Tabelle zugreifen (Index 3) ob es in Zeile 0, 1 oder 3 ist; solange jede Zeile die gleiche Anzahl von Zellen hat:

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

Um die Abfrage von id, um den Baum eines Elements zu beschränken Sie querySelector verwenden können:

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

Aber das ist nur überflüssig, wenn Sie können einfach tun

document.getElementById('cell1'); 

bearbeiten: bessere Antwort auf OP Wunsch kann man der Reihe nach an die Zellen einer Tabelle auf diese Weise zugreifen:

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

Dies wählt die k -te Zelle der j -ten Zeile des i -te Körpers des Tisches. Wenn Ihre Tabelle nur ein <tbody> Element (wie üblich) hat oder Sie auf die Zellen unabhängig von ihrem <tbody> zugreifen möchten, können Sie den .tBodies[i] Teil weglassen.

Answer 3

Geben Sie die <td> Zelle eine ID:

<td id="mycell"> 

Dann können Sie das DOM-Objekt zugreifen, indem getElementById() mit:

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

Eine Tabelle der .rows collection bietet Zugriff auf die Zeilen. Die Zeile .cells einer Zeile ermöglicht den Zugriff auf die Zellen dieser Zeile. Beide verwenden nullbasierte Indexierung und haben eine .length Eigenschaft. Also:

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