HTMLTableElement.tHead — Eigenschaft · JavaScript-Referenz

Signatur

HTMLTableElement.tHead

Beschreibung

Die Eigenschaft tHead von HTMLTableElement gibt das erste direkte Kindelement <thead> einer Tabelle als HTMLTableSectionElement zurück. Hat die Tabelle keinen Tabellenkopf, ist der Wert null. Damit kommt man ohne querySelector an die Kopfzeilen, etwa um Spaltenüberschriften auszulesen, Sortier-Schaltflächen einzubauen oder Spalten für einen CSV-Export zu benennen.

Die Eigenschaft lässt sich auch setzen. Weist man ein <thead>-Element zu, wird ein vorhandener erster Tabellenkopf entfernt. Das neue Element wird direkt vor dem ersten Kindelement eingefügt, das weder <caption> noch <colgroup> ist. Gibt es kein solches Element, kommt es ans Ende der Tabelle. Weist man null zu, wird der erste Tabellenkopf entfernt.

Wenn man nur sicherstellen will, dass ein Kopf existiert, ist createTHead() meist bequemer: Die Methode gibt den vorhandenen <thead> zurück oder legt einen neuen an. Zum Entfernen gibt es außerdem deleteTHead().

Parameter

Name	Typ	Default	Beschreibung
$wert (beim Setzen)	HTMLTableSectionElement \| null		Nur beim Zuweisen: ein `<thead>`-Element, das den bisherigen Tabellenkopf ersetzt, oder `null`, um ihn zu entfernen.

Rückgabewert

Typ

HTMLTableSectionElement | null

Beschreibung

Das erste <thead>-Kindelement der Tabelle oder null, wenn es keins gibt.

Beispiele

Spaltenüberschriften auslesen

// <table id="preise"><thead><tr><th>Produkt</th><th>Preis</th></tr></thead>...</table>
const table = document.querySelector('#preise');
const head = table.tHead;

if (head) {
  const titel = [...head.rows[0].cells].map((th) => th.textContent.trim());
  console.log(titel);
} else {
  console.log('Kein Tabellenkopf vorhanden');
}

["Produkt", "Preis"]

Neuen Tabellenkopf zuweisen

const table = document.createElement('table');
table.createTBody().insertRow().insertCell().textContent = 'Anna';

const thead = document.createElement('thead');
const th = document.createElement('th');
th.textContent = 'Name';
thead.insertRow().appendChild(th);

table.tHead = thead; // wird vor dem <tbody> eingefügt
console.log(table.firstElementChild === thead);
console.log(table.tHead.rows.length);

true 1

Kopf entfernen und fehlerhafte Zuweisung abfangen

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

// Tabellenkopf entfernen (wie table.deleteTHead())
table.tHead = null;
console.log(table.tHead);

try {
  table.tHead = document.createElement('tbody'); // kein <thead>!
} catch (err) {
  console.log(err.name);
}

null HierarchyRequestError

Sortier-Klick auf Kopfzellen registrieren

const table = document.querySelector('#daten');
const head = table.tHead ?? table.createTHead();

head.addEventListener('click', (event) => {
  const th = event.target.closest('th');
  if (!th) return;
  console.log(`Sortiere nach Spalte ${th.cellIndex}: ${th.textContent}`);
});

// Wichtig · Fallstricke

Wer ein Element zuweist, das kein <thead> ist (z. B. <tbody>), löst eine DOMException vom Typ HierarchyRequestError aus.
Berücksichtigt wird nur ein direktes Kindelement der Tabelle. Ein <thead> in einer verschachtelten Tabelle zählt nicht mit. Gibt es mehrere <thead> (ungültiges HTML), liefert die Eigenschaft nur das erste.
Fehlt im HTML-Quelltext das <thead>, erzeugt der Parser keines automatisch, anders als beim <tbody>. Kopfzeilen, die nur aus <th> in einem <tbody> bestehen, ergeben also tHead === null.
Die Eigenschaft wird seit Langem von allen Browsern unterstützt, auch von alten Internet-Explorer-Versionen. Die Zuweisung (Setter) ist ebenfalls überall verfügbar. Für lesbaren Code eignen sich trotzdem oft createTHead() und deleteTHead().

Siehe auch

HTMLOptionElement.text HTMLTableElement.tFoot HTMLTableElement.align HTMLTableElement.frame HTMLTableElement.rows