HTMLTableSectionElement — Schnittstelle · JavaScript-Referenz

Signatur

interface HTMLTableSectionElement extends HTMLElement

Beschreibung

HTMLTableSectionElement ist das DOM-Interface für die drei Bereiche einer Tabelle: <thead> (Kopf), <tbody> (Rumpf) und <tfoot> (Fuß). Es erbt alles von HTMLElement und bringt zusätzlich eigene Eigenschaften und Methoden mit, die nur für die Zeilen innerhalb des jeweiligen Bereichs gelten.

Die wichtigsten Mitglieder sind:

rows: eine live HTMLCollection aller <tr>-Elemente dieses Bereichs (nur Lesezugriff).
insertRow(index): legt eine neue <tr> an, fügt sie an der angegebenen Position ein und gibt sie als HTMLTableRowElement zurück.
deleteRow(index): löscht die Zeile an der angegebenen Position.
Veraltete Eigenschaften: align, ch, chOff, vAlign. Stattdessen verwendet man CSS.

Gebraucht wird das Interface vor allem, wenn man Tabellen dynamisch füllt, z. B. mit Daten aus einer API. Anders als bei HTMLTableElement.insertRow() weiß man hier immer genau, in welchem Bereich die neue Zeile landet. Die Indizes beziehen sich nur auf die Zeilen dieses Bereichs und nicht auf die ganze Tabelle.

An eine Instanz kommt man über table.tHead, table.tFoot, table.tBodies[n], table.createTBody(), table.createTHead(), table.createTFoot() oder über document.createElement("tbody"). Einen öffentlichen Konstruktor gibt es nicht.

Parameter

Name	Typ	Default	Beschreibung
$index (insertRow)	number	-1	Position der neuen Zeile innerhalb des Bereichs. `-1` oder ein Wert gleich `rows.length` hängt die Zeile ans Ende an.
$index (deleteRow) Pflicht	number		Position der Zeile, die gelöscht werden soll. `-1` löscht die letzte Zeile.

Rückgabewert

Typ

HTMLTableRowElement | void

Beschreibung

insertRow() gibt die neu angelegte HTMLTableRowElement zurück, deleteRow() gibt undefined zurück. Die Eigenschaft rows liefert eine HTMLCollection.

Beispiele

tbody erzeugen und mit API-Daten füllen

const table = document.createElement("table");
const tbody = table.createTBody(); // HTMLTableSectionElement

const users = [
  { name: "Anna", city: "Berlin" },
  { name: "Ben", city: "Hamburg" }
];

for (const { name, city } of users) {
  const row = tbody.insertRow(); // wird ans Ende angehängt
  row.insertCell().textContent = name;
  row.insertCell().textContent = city;
}

document.body.append(table);
console.log(tbody instanceof HTMLTableSectionElement, tbody.rows.length);

true 2

Kopfzeile anlegen und Zeile oben einfügen

const table = document.querySelector("table");
const thead = table.tHead ?? table.createTHead();

const headRow = thead.insertRow(0);
["Name", "Stadt"].forEach((label) => {
  const th = document.createElement("th");
  th.textContent = label;
  headRow.append(th);
});

console.log(thead.tagName, thead.rows.length);

THEAD 1

Alle Zeilen eines tbody leeren (live-Collection beachten)

const tbody = document.querySelector("#data tbody");

// Von hinten löschen, weil rows live ist
while (tbody.rows.length > 0) {
  tbody.deleteRow(-1);
}

// Alternative, meist schneller:
// tbody.replaceChildren();

console.log(tbody.rows.length);

Summenzeile im tfoot aktualisieren

const table = document.querySelector("#orders");
const [tbody] = table.tBodies;
const tfoot = table.tFoot ?? table.createTFoot();

const total = [...tbody.rows]
  .map((row) => Number(row.cells[1].textContent))
  .reduce((sum, n) => sum + n, 0);

tfoot.replaceChildren();
const row = tfoot.insertRow();
row.insertCell().textContent = "Summe";
row.insertCell().textContent = total.toFixed(2);

console.log(`Summe: ${total.toFixed(2)}`);

Summe: 129.90

// Wichtig · Fallstricke

Live-Collection: rows ändert sich sofort mit. Wer in einer vorwärts laufenden Schleife löscht, überspringt Zeilen. Deshalb von hinten löschen oder vorher mit [...rows] kopieren.
Fehler durch falschen Index: insertRow() und deleteRow() werfen eine IndexSizeError-DOMException, wenn der Index kleiner als -1 oder größer als rows.length ist. Bei deleteRow() gilt schon rows.length selbst als ungültig.
Automatisch erzeugtes tbody: Der HTML-Parser legt ein <tbody> an, auch wenn es im Quelltext fehlt. Selektoren wie table > tr finden dann nichts. Nutze table.tBodies[0].
Veraltete Attribute: align, ch, chOff und vAlign sind veraltet und werden kaum noch unterstützt. Für die Gestaltung CSS verwenden (text-align, vertical-align).
Sicherheit: Zellinhalte über textContent setzen und nicht über innerHTML, wenn die Daten von außen kommen. Sonst droht XSS.
Leistung: Bei vielen Zeilen besser einen DocumentFragment oder ein losgelöstes tbody befüllen und erst am Ende einhängen.
Kompatibilität: Wird in allen Browsern unterstützt, auch in sehr alten.

Siehe auch

HTMLTableCaptionElement HTMLTableColElement HTMLTableCellElement HTMLTableRowElement HTMLGeolocationElement