HTMLTableRowElement — Schnittstelle · JavaScript-Referenz

Signatur

interface HTMLTableRowElement extends HTMLElement

Beschreibung

HTMLTableRowElement ist das DOM-Interface für das HTML-Element <tr>. Es erbt alle Eigenschaften und Methoden von HTMLElement und ergänzt sie um tabellenspezifische Funktionen, mit denen sich die Zellen einer Zeile gezielt ansprechen und verändern lassen – ohne umständliches Arbeiten mit createElement() und appendChild().

Wichtige Mitglieder:

cells – eine lebende HTMLCollection aller <td>- und <th>-Zellen der Zeile.
rowIndex – Position der Zeile innerhalb der gesamten Tabelle (inklusive <thead> und <tfoot>); -1, wenn die Zeile zu keiner Tabelle gehört.
sectionRowIndex – Position der Zeile innerhalb ihres Abschnitts (<thead>, <tbody> oder <tfoot>).
insertCell(index) – fügt eine neue <td>-Zelle ein und gibt sie zurück.
deleteCell(index) – entfernt die Zelle an der angegebenen Position.

Typische Einsatzgebiete sind dynamisch aufgebaute Datentabellen, das Hinzufügen oder Entfernen von Einträgen per Klick sowie das Ermitteln, in welcher Zeile ein Ereignis stattgefunden hat. Instanzen erhält man über document.createElement('tr'), HTMLTableElement.insertRow() bzw. HTMLTableSectionElement.insertRow() oder durch Abfragen bestehender Elemente.

Veraltete Eigenschaften wie align, bgColor, ch, chOff und vAlign sind zwar noch vorhanden, sollten aber durch CSS ersetzt werden.

Parameter

Name	Typ	Default	Beschreibung
$insertCell(index)	number	-1	Position, an der die neue `<td>` eingefügt wird. `-1` oder die Anzahl der Zellen hängt am Ende an.
$deleteCell(index) Pflicht	number		Position der zu löschenden Zelle. `-1` löscht die letzte Zelle.

Rückgabewert

Typ

HTMLTableRowElement

Beschreibung

Das Interface selbst hat keinen Rückgabewert; insertCell() gibt ein HTMLTableCellElement zurück, deleteCell() gibt undefined zurück.

Beispiele

Zeile erzeugen und Zellen einfügen

const tbody = document.querySelector('#kunden tbody');

// insertRow() liefert ein HTMLTableRowElement
const row = tbody.insertRow();
const kunde = { name: 'Anna Schmidt', ort: 'Berlin', umsatz: 1250 };

for (const wert of Object.values(kunde)) {
  const cell = row.insertCell(); // hängt am Ende an
  cell.textContent = wert;
}

console.log(row instanceof HTMLTableRowElement, row.cells.length);

true 3

Angeklickte Zeile ermitteln und löschen

const table = document.querySelector('#kunden');

table.addEventListener('click', (event) => {
  const button = event.target.closest('button.loeschen');
  if (!button) return;

  const row = button.closest('tr');
  console.log(`Zeile ${row.rowIndex} (im Abschnitt: ${row.sectionRowIndex}) wird gelöscht`);
  table.deleteRow(row.rowIndex);
});

Zeile 3 (im Abschnitt: 2) wird gelöscht

Zellen lesen und eine Spalte entfernen

const rows = document.querySelectorAll('#kunden tr');

for (const row of rows) {
  // cells ist eine HTMLCollection – mit Array.from() in ein Array umwandeln
  const texte = Array.from(row.cells, (cell) => cell.textContent.trim());
  console.log(texte.join(' | '));

  // letzte Spalte (z. B. Aktionen) aus jeder Zeile entfernen
  if (row.cells.length > 0) row.deleteCell(-1);
}

// Wichtig · Fallstricke

insertCell() erzeugt immer eine <td>. Für Kopfzellen document.createElement('th') verwenden und per row.append() einfügen.
Ein index kleiner als -1 oder größer als die Zellenanzahl wirft eine IndexSizeError-DOMException.
cells ist lebend: Wer beim Durchlaufen Zellen löscht, sollte rückwärts iterieren oder vorher mit Array.from() kopieren.
rowIndex zählt über alle Abschnitte in Dokumentreihenfolge von thead, tbody, tfoot; für tbody.deleteRow() daher sectionRowIndex verwenden.
Beim Befüllen mit Nutzerdaten textContent statt innerHTML nutzen, um XSS zu vermeiden.
Die Attribute align, bgColor, ch, chOff und vAlign sind veraltet – stattdessen CSS verwenden. Das Interface selbst wird von allen modernen Browsern unterstützt.

Siehe auch

HTMLTableColElement HTMLTableElement HTMLTableCellElement HTMLLabelElement HTMLTitleElement