HTMLTableRowElement.cells — Eigenschaft · JavaScript-Referenz

Signatur

HTMLTableRowElement.cells

Beschreibung

Die Eigenschaft cells eines <tr>-Elements gibt eine HTMLCollection zurück. Sie enthält alle direkten Kind-Zellen der Zeile, also <td>- und <th>-Elemente, in der Reihenfolge, in der sie im Dokument stehen. Andere Kindknoten wie Text, Kommentare oder <template> zählen nicht dazu.

Die Sammlung ist live. Fügst du mit insertCell() eine Zelle hinzu oder entfernst du eine mit deleteCell() bzw. remove(), passt sich die Sammlung sofort an. Du musst cells also nicht neu abfragen. Die Eigenschaft selbst kannst du nicht überschreiben.

Typische Einsatzfälle sind das spaltenweise Auslesen von Tabellendaten, das Hervorheben bestimmter Spalten, clientseitiges Sortieren und der Export von Tabellen, etwa als CSV. Zusammen mit HTMLTableElement.rows kannst du eine Tabelle wie ein zweidimensionales Feld durchlaufen: table.rows[i].cells[j].

Rückgabewert

Typ

HTMLCollection<HTMLTableCellElement>

Beschreibung

Eine live aktualisierte Sammlung der <td>- und <th>-Elemente der Zeile. Ohne Zellen ist sie leer (length === 0).

Beispiele

Zellinhalte einer Zeile auslesen

// <table id="produkte"><tr><th>Name</th><th>Preis</th></tr><tr><td>Apfel</td><td>0,50</td></tr></table>
const row = document.querySelector('#produkte tr:nth-child(2)');

console.log(row.cells.length);
console.log(row.cells[0].textContent);

// HTMLCollection in ein Array umwandeln, um map() zu nutzen
const werte = Array.from(row.cells, (cell) => cell.textContent.trim());
console.log(werte);

2 Apfel ["Apfel", "0,50"]

Tabelle als CSV exportieren

const tableToCsv = (table) =>
  Array.from(table.rows, (row) =>
    Array.from(row.cells, (cell) => `"${cell.textContent.trim().replaceAll('"', '""')}"`).join(';')
  ).join('\n');

const csv = tableToCsv(document.querySelector('#produkte'));
console.log(csv);

"Name";"Preis" "Apfel";"0,50"

Die Sammlung ist live

const row = document.createElement('tr');
const { cells } = row; // Referenz einmal holen

console.log(cells.length);
row.insertCell().textContent = 'A';
row.insertCell().textContent = 'B';
console.log(cells.length); // automatisch aktualisiert

row.deleteCell(0);
console.log(cells.length, cells[0].textContent);

0 2 1 B

Eine Spalte hervorheben

const highlightColumn = (table, index) => {
  for (const row of table.rows) {
    // Zeilen mit weniger Zellen (z. B. durch colspan) abfangen
    row.cells[index]?.classList.add('markiert');
  }
};

highlightColumn(document.querySelector('#produkte'), 1);

// Wichtig · Fallstricke

Live-Sammlung beim Löschen: Entfernst du Zellen in einer vorwärts laufenden Schleife über cells, rücken die nachfolgenden Zellen auf und werden übersprungen. Lauf deshalb rückwärts (for (let i = cells.length - 1; i >= 0; i--)) oder erstelle vorher eine Kopie mit Array.from().
Kein Array: HTMLCollection hat kein map(), filter() oder forEach(). Wandle sie mit Array.from() oder dem Spread-Operator [...row.cells] um. for...of funktioniert direkt.
colspan/rowspan: Der Index in cells entspricht nicht immer der sichtbaren Spalte. Eine Zelle mit colspan="2" ist nur ein Eintrag, und Zellen, die aus einer oberen Zeile per rowspan hineinragen, fehlen ganz. Die logische Position einer Zelle innerhalb ihrer Zeile liefert cellIndex.
Ein Index außerhalb des Bereichs liefert undefined und wirft keinen Fehler. item(i) gibt in diesem Fall null zurück.
Die Eigenschaft ist schreibgeschützt. Zellen änderst du über insertCell(), deleteCell() oder normale DOM-Methoden.
Wird in allen gängigen Browsern seit Langem unterstützt.

Siehe auch

HTMLSourceElement.media HTMLTableRowElement.ch HTMLTableRowElement.chOff HTMLTableRowElement.align HTMLTableRowElement.bgColor