HTMLTableElement.deleteTFoot() — Methode · JavaScript-Referenz

Signatur

HTMLTableElement.prototype.deleteTFoot()

Beschreibung

Die Methode deleteTFoot() der Schnittstelle HTMLTableElement entfernt den Tabellenfuß, also das erste <tfoot>-Element, das ein direktes Kind der Tabelle ist. Alle Zeilen und Zellen darin werden dabei mit entfernt.

Nützlich ist sie in dynamischen Tabellen, etwa um eine Summenzeile auszublenden, wenn Filter aktiv sind, oder um einen alten Fuß zu löschen, bevor ein neuer erzeugt wird. Zusammen mit createTFoot() und der Eigenschaft tFoot lässt sich der Tabellenfuß komplett verwalten, ohne selbst querySelector() und remove() aufzurufen.

Gibt es keinen <tfoot>, macht die Methode einfach nichts und wirft auch keinen Fehler. Deshalb muss man vorher nicht prüfen, ob ein Fuß existiert.

Beispiele

Tabellenfuß einfach entfernen

const table = document.createElement('table');
table.createTFoot().insertRow().insertCell().textContent = 'Summe: 42';

console.log(table.tFoot !== null); // true
table.deleteTFoot();
console.log(table.tFoot);          // null

true null

Summenzeile je nach Filterstatus ein- und ausblenden

const table = document.querySelector('#umsatz');
const filterCheckbox = document.querySelector('#nurOffene');

const renderFooter = () => {
  // Alten Fuß immer zuerst entfernen – ohne Fehler, auch wenn keiner existiert
  table.deleteTFoot();
  if (filterCheckbox.checked) return; // bei Filter keine Gesamtsumme

  const betraege = [...table.tBodies[0].rows]
    .map((row) => Number(row.cells[1].textContent));
  const summe = betraege.reduce((a, b) => a + b, 0);

  const row = table.createTFoot().insertRow();
  row.insertCell().textContent = 'Gesamt';
  row.insertCell().textContent = summe.toFixed(2);
};

filterCheckbox.addEventListener('change', renderFooter);
renderFooter();

Nur direkte tfoot-Kinder werden entfernt

const table = document.createElement('table');
table.innerHTML = '<tfoot><tr><td>A</td></tr></tfoot><tfoot><tr><td>B</td></tr></tfoot>';

table.deleteTFoot(); // entfernt nur den ersten tfoot
console.log(table.querySelectorAll('tfoot').length);
console.log(table.tFoot.textContent);

1 B

// Wichtig · Fallstricke

Entfernt wird nur das erste <tfoot>, das ein direktes Kind der Tabelle ist. Wer mehrere entfernen will (bei ungültigem HTML möglich), ruft die Methode in einer Schleife auf, z. B. while (table.tFoot) table.deleteTFoot();
Der Parser erzeugt bei innerHTML manchmal nicht die Struktur, die man erwartet. Verschachtelte Tabellen sind nicht betroffen: Ein <tfoot> in einer inneren Tabelle bleibt erhalten.
Referenzen auf das entfernte Element bleiben im Speicher gültig. Das Element lässt sich also z. B. über table.tFoot = gespeichertesTfoot wieder einsetzen.
Die Methode wird seit langem von allen Browsern unterstützt (DOM Level 1).

Siehe auch

HTMLTableElement.createTFoot() HTMLTableElement.tFoot HTMLTableElement.deleteTHead() HTMLTableElement.deleteCaption() HTMLTableElement.deleteRow() HTMLTableElement HTMLTableElement.insertRow()