HTMLTableElement.createTFoot() — Methode · JavaScript-Referenz

Signatur

HTMLTableElement.prototype.createTFoot()

Beschreibung

createTFoot() liefert den Tabellenfuß (<tfoot>) eines <table>-Elements. Besitzt die Tabelle schon ein <tfoot>, bekommst du genau dieses Element zurück. Es wird also kein zweites angelegt. Fehlt es, erzeugt die Methode ein neues HTMLTableSectionElement und fügt es als letztes Kind der Tabelle ein.

Typische Einsatzfälle sind dynamisch erzeugte Tabellen, zum Beispiel Rechnungen, Berichte oder Datenraster. Im Fuß stehen dort Summen, Durchschnittswerte oder Hinweise. Die Methode ist praktisch, weil du vorher nicht prüfen musst, ob schon ein Fuß existiert. Sie ist idempotent: Mehrfaches Aufrufen liefert immer dasselbe Element.

Das zurückgegebene Element befüllst du mit insertRow() und insertCell(). Denselben Fuß erreichst du auch über die Eigenschaft table.tFoot. Mit deleteTFoot() entfernst du ihn wieder.

Rückgabewert

Typ

HTMLTableSectionElement

Beschreibung

Das vorhandene oder neu erzeugte <tfoot>-Element der Tabelle.

Beispiele

Summenzeile für eine Rechnungstabelle

const positionen = [
  { name: 'Hosting', preis: 12.5 },
  { name: 'Domain', preis: 1.2 },
  { name: 'Support', preis: 30 }
];

const table = document.createElement('table');
const tbody = table.createTBody();

for (const { name, preis } of positionen) {
  const row = tbody.insertRow();
  row.insertCell().textContent = name;
  row.insertCell().textContent = preis.toFixed(2) + ' €';
}

// Fuß anlegen und Summe eintragen
const tfoot = table.createTFoot();
const summenZeile = tfoot.insertRow();
summenZeile.insertCell().textContent = 'Summe';
const summe = positionen.reduce((acc, p) => acc + p.preis, 0);
summenZeile.insertCell().textContent = summe.toFixed(2) + ' €';

document.body.append(table);
console.log(table.lastElementChild.tagName);

TFOOT

Mehrfacher Aufruf liefert dasselbe Element

const table = document.createElement('table');

const fuss1 = table.createTFoot();
const fuss2 = table.createTFoot();

console.log(fuss1 === fuss2);
console.log(table.tFoot === fuss1);
console.log(table.querySelectorAll('tfoot').length);

true true 1

Fuß bei jeder Aktualisierung neu berechnen

const updateFooter = (table) => {
  const tfoot = table.createTFoot(); // vorhandenen holen oder neu anlegen
  tfoot.replaceChildren();           // alten Inhalt leeren

  const anzahl = table.tBodies[0]?.rows.length ?? 0;
  const cell = tfoot.insertRow().insertCell();
  cell.colSpan = table.rows[0]?.cells.length || 1;
  cell.textContent = `${anzahl} Einträge`;
};

const table = document.querySelector('#daten');
updateFooter(table);
console.log(table.tFoot.textContent);

3 Einträge

// Wichtig · Fallstricke

Position: Nach aktueller HTML-Spezifikation landet ein neues <tfoot> am Ende der Tabelle. Ältere Spezifikationen und sehr alte Browser haben es vor dem ersten <tbody> eingefügt. Die Darstellung ändert das nicht: Browser zeigen den Fuß immer unten an.
Ein <tfoot>, das schon existiert, wird zurückgegeben und nicht verschoben. Es bleibt an seiner bisherigen Stelle im DOM.
Die Methode gibt es nur auf HTMLTableElement. Auf einem <tbody> oder auf einem allgemeinen Element führt der Aufruf zu einem TypeError.
Zellinhalte setzt du lieber über textContent als über innerHTML. So vermeidest du XSS-Lücken, wenn Nutzerdaten in den Fuß geschrieben werden.
Die Methode wird von allen Browsern unterstützt, auch von sehr alten.

Siehe auch

HTMLTableElement.createCaption() HTMLTableElement.createTBody() HTMLTableElement.createTHead() HTMLTableElement.deleteTFoot() HTMLTableElement.deleteRow()