Signatur
Beschreibung
Die Eigenschaft tFoot des Interfaces HTMLTableElement gibt das erste direkte <tfoot>-Kind einer Tabelle als HTMLTableSectionElement zurück. Hat die Tabelle keinen Tabellenfuß, ist der Wert null. Verschachtelte <tfoot>-Elemente in inneren Tabellen werden nicht berücksichtigt.
Die Eigenschaft ist les- und schreibbar. Wird ihr ein <tfoot>-Element zugewiesen, entfernt der Browser zuerst den bisherigen ersten Tabellenfuß und hängt das neue Element am Ende der Tabelle an. Die Zuweisung von null entfernt den vorhandenen Tabellenfuß.
Typische Einsatzfälle sind Summen- oder Ergebniszeilen, die per Skript berechnet und aktualisiert werden, oder das Prüfen, ob eine Tabelle bereits einen Fußbereich hat. Wenn du nur „Fuß holen oder anlegen“ willst, ist createTFoot() meist bequemer, zum Entfernen gibt es deleteTFoot().
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $value (beim Setzen) | HTMLTableSectionElement | null | Ein <tfoot>-Element, das den bisherigen Tabellenfuß ersetzt, oder null, um ihn zu entfernen. |
Rückgabewert
<tfoot>-Kind der Tabelle oder null, wenn keines existiert.Beispiele
Prüfen, ob eine Tabelle einen Fuß hat
const table = document.createElement('table');
table.innerHTML = '<tbody><tr><td>1</td></tr></tbody><tfoot><tr><td>Summe</td></tr></tfoot>';
console.log(table.tFoot?.tagName);
console.log(document.createElement('table').tFoot);Summenzeile berechnen und in den Tabellenfuß schreiben
const table = document.createElement('table');
table.innerHTML = `
<tbody>
<tr><td>Äpfel</td><td>2.50</td></tr>
<tr><td>Birnen</td><td>3.20</td></tr>
</tbody>`;
const sum = [...table.tBodies[0].rows]
.reduce((acc, row) => acc + Number(row.cells[1].textContent), 0);
// Fuß holen oder neu anlegen
const foot = table.tFoot ?? table.createTFoot();
foot.innerHTML = '';
const row = foot.insertRow();
row.insertCell().textContent = 'Summe';
row.insertCell().textContent = sum.toFixed(2);
console.log(table.tFoot.rows[0].cells[1].textContent);Tabellenfuß per Zuweisung ersetzen und entfernen
const table = document.createElement('table');
table.createTFoot().insertRow().insertCell().textContent = 'Alt';
const newFoot = document.createElement('tfoot');
newFoot.insertRow().insertCell().textContent = 'Neu';
table.tFoot = newFoot; // alter Fuß wird entfernt
console.log(table.querySelectorAll('tfoot').length, table.tFoot.textContent);
table.tFoot = null; // Fuß entfernen (wie deleteTFoot())
console.log(table.tFoot);// Wichtig · Fallstricke
- Wird ein Element zugewiesen, das kein
<tfoot>ist, etwa ein<thead>, wirft der Browser eineDOMExceptionvom TypHierarchyRequestError. Bei Werten, die überhaupt keinHTMLTableSectionElementsind, kommt einTypeError. - Es wird nur das erste
<tfoot>berücksichtigt. Weitere, ungültige<tfoot>-Elemente bleiben beim Ersetzen erhalten. - Seit HTML5 darf
<tfoot>nach<tbody>stehen. Beim Setzen hängen moderne Browser das Element am Ende der Tabelle an. Ältere Browser haben es teilweise vor dem ersten<tbody>eingefügt. Die Darstellung ist in beiden Fällen gleich: Der Fuß erscheint unten. - Die Eigenschaft wird von allen Browsern unterstützt, auch von sehr alten.
- Vorsicht beim Befüllen per
innerHTMLmit Nutzerdaten (XSS-Gefahr). Für Werte isttextContentdie bessere Wahl.