HTMLTableElement.createTBody() — Methode · JavaScript-Referenz

Signatur

HTMLTableElement.prototype.createTBody()

Beschreibung

Die Methode createTBody() des HTMLTableElement erzeugt ein neues <tbody>-Element und hängt es direkt in die Tabelle ein. Gibt es in der Tabelle schon <tbody>-Kindelemente, landet das neue Element unmittelbar hinter dem letzten davon. Gibt es noch keins, wird es als letztes Kindelement der Tabelle angehängt.

Anders als createTHead() und createTFoot() gibt createTBody() kein vorhandenes Element zurück. Jeder Aufruf erzeugt ein neues <tbody>. Das ist gewollt, denn eine Tabelle darf mehrere <tbody>-Abschnitte haben, etwa um Zeilen logisch zu gruppieren (z. B. nach Monaten oder Kategorien).

Gebraucht wird die Methode vor allem, wenn Tabellen per JavaScript aus Daten aufgebaut werden, etwa aus einer API-Antwort. Das zurückgegebene HTMLTableSectionElement bietet mit insertRow() und rows eine bequeme Schnittstelle, um Zeilen einzufügen. Alle <tbody>-Abschnitte einer Tabelle stehen in der Live-Sammlung table.tBodies.

Rückgabewert

Typ

HTMLTableSectionElement

Beschreibung

Das neu erzeugte und bereits eingefügte <tbody>-Element.

Beispiele

Tabellenkörper erzeugen und befüllen

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

const row = tbody.insertRow();
row.insertCell().textContent = 'Anna';
row.insertCell().textContent = '32';

document.body.append(table);
console.log(table.tBodies.length);
console.log(table.outerHTML);

1 <table><tbody><tr><td>Anna</td><td>32</td></tr></tbody></table>

Tabelle aus API-Daten aufbauen

const renderUsers = async (table) => {
  const res = await fetch('https://jsonplaceholder.typicode.com/users');
  const users = await res.json();

  // Alte Körper entfernen, dann einen neuen anlegen
  [...table.tBodies].forEach((tb) => tb.remove());
  const tbody = table.createTBody();

  for (const { name, email } of users) {
    const row = tbody.insertRow();
    row.insertCell().textContent = name;   // textContent: XSS-sicher
    row.insertCell().textContent = email;
  }
  console.log(`${tbody.rows.length} Zeilen gerendert`);
};

renderUsers(document.querySelector('#users'));

10 Zeilen gerendert

Mehrere tbody-Gruppen – Reihenfolge und tfoot

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

const groups = { Januar: [120, 80], Februar: [95] };
for (const [monat, werte] of Object.entries(groups)) {
  const tbody = table.createTBody();
  tbody.dataset.monat = monat;
  werte.forEach((w) => (tbody.insertRow().insertCell().textContent = w));
}

console.log([...table.children].map((el) => el.tagName));
console.log(table.tBodies[1].dataset.monat);

["TFOOT", "TBODY", "TBODY"] Februar

// Wichtig · Fallstricke

Jeder Aufruf erzeugt ein neues Element. Wer createTBody() in einer Schleife oder bei jedem Neuzeichnen aufruft, bekommt schnell viele leere oder doppelte <tbody>-Abschnitte. Vorhandene Abschnitte vorher über table.tBodies prüfen oder entfernen.
Einfügeposition: Gibt es noch kein <tbody>, landet das neue Element ganz am Ende, also auch hinter einem bereits vorhandenen <tfoot> (siehe Beispiel 3). Für den Browser ist das gültig und wird richtig dargestellt, im DOM steht es aber in dieser Reihenfolge. Wer sauberes Markup braucht, erzeugt <tbody> vor dem <tfoot>.
Beim Parsen von HTML legt der Browser automatisch ein <tbody> an, wenn <tr> direkt in <table> stehen. Bei per DOM erzeugten Tabellen passiert das nicht. Dann kann table.insertRow() Zeilen direkt in die Tabelle setzen, ohne <tbody>.
Zellinhalte aus fremden Daten mit textContent setzen, nicht mit innerHTML. Sonst droht XSS.
Viele Zeilen am besten einfügen, bevor die Tabelle ins Dokument kommt. Das vermeidet wiederholte Neuberechnungen des Layouts (Reflows).
Wird in allen modernen Browsern unterstützt, die Methode ist seit Jahren Teil des HTML-Standards.

Siehe auch

HTMLObjectElement.reportValidity() HTMLTableElement.createTFoot() HTMLTableElement.createTHead() HTMLTableElement.createCaption() HTMLTableElement.deleteTFoot()