HTMLTableElement.deleteTHead() — Methode · JavaScript-Referenz

Signatur

HTMLTableElement.prototype.deleteTHead()

Beschreibung

Die Methode deleteTHead() des Interfaces HTMLTableElement entfernt das erste <thead>-Element, das ein direktes Kind der Tabelle ist, samt allen enthaltenen Zeilen und Zellen aus dem DOM. Hat die Tabelle keinen Tabellenkopf, tut die Methode nichts und wirft auch keinen Fehler.

Gegenstück ist createTHead(): Diese Methode gibt einen vorhandenen <thead> zurück oder legt einen neuen an. Beide Methoden sind nützlich, wenn Tabellen dynamisch aufgebaut oder umgestaltet werden, etwa um für eine Druckansicht, einen CSV-Export oder eine kompakte Mobilansicht die Kopfzeile wegzulassen oder sie vor dem Neuaufbau zu entfernen.

Nach dem Aufruf gibt die Eigenschaft table.tHead null zurück, wenn es keinen weiteren <thead> gibt. Das entfernte Element wird nicht zurückgegeben. Wer den Kopf später wieder einfügen möchte, sollte sich vorher eine Referenz über table.tHead merken.

Rückgabewert

Typ

void

Beschreibung

Kein Rückgabewert (undefined). Das entfernte <thead>-Element wird nicht zurückgegeben.

Beispiele

Tabellenkopf entfernen

// <table id="preise"><thead><tr><th>Produkt</th><th>Preis</th></tr></thead>
// <tbody><tr><td>Kaffee</td><td>3,20 €</td></tr></tbody></table>
const table = document.getElementById('preise');

console.log(table.tHead !== null); // Kopf vorhanden?
table.deleteTHead();
console.log(table.tHead);          // nach dem Löschen

true null

Kopfzeile ein-/ausblenden und dabei wiederherstellen

const table = document.querySelector('table');
let gespeicherterKopf = null;

const toggleKopf = () => {
  if (table.tHead) {
    // Referenz sichern, da deleteTHead() nichts zurückgibt
    gespeicherterKopf = table.tHead;
    table.deleteTHead();
  } else if (gespeicherterKopf) {
    // tHead-Setter fügt den Kopf an der richtigen Stelle ein
    table.tHead = gespeicherterKopf;
  }
};

document.querySelector('#kopf-toggle').addEventListener('click', toggleKopf);

Tabelle aus Daten neu aufbauen

const renderTabelle = (table, spalten, zeilen) => {
  // Alten Kopf und alte Körper entfernen
  table.deleteTHead();
  [...table.tBodies].forEach((tbody) => tbody.remove());

  const kopfZeile = table.createTHead().insertRow();
  spalten.forEach((name) => {
    const th = document.createElement('th');
    th.textContent = name;
    kopfZeile.append(th);
  });

  const tbody = table.createTBody();
  zeilen.forEach((werte) => {
    const tr = tbody.insertRow();
    werte.forEach((wert) => { tr.insertCell().textContent = wert; });
  });
};

const table = document.querySelector('#bericht');
renderTabelle(table, ['Name', 'Alter'], [['Anna', 34], ['Ben', 28]]);
console.log(table.tHead.rows[0].cells.length);

2

// Wichtig · Fallstricke

Nur das erste direkte Kind: Es wird ausschließlich der erste <thead> entfernt, der direktes Kind der Tabelle ist. Ungültiges Markup mit mehreren <thead>-Elementen erfordert mehrere Aufrufe, zum Beispiel while (table.tHead) table.deleteTHead();.
Kein Fehler bei fehlendem Kopf: Eine vorherige Prüfung auf table.tHead ist nicht nötig, ein Aufruf ohne Tabellenkopf bewirkt einfach nichts.
Kein Rückgabewert: Wer den Kopf wiederverwenden will, muss sich die Referenz vorher über table.tHead sichern.
Barrierefreiheit: Ohne <thead> bzw. <th>-Zellen fehlt Screenreadern der Bezug zwischen Datenzellen und Spaltenüberschriften. Zum rein optischen Ausblenden ist CSS meist die bessere Wahl.
Kompatibilität: Wird seit jeher von allen Browsern unterstützt, auch vom Internet Explorer.

Siehe auch

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