HTMLTableElement.tBodies — Eigenschaft · JavaScript-Referenz

Signatur

get HTMLTableElement.tBodies

Beschreibung

Die Eigenschaft tBodies liefert alle <tbody>-Abschnitte einer Tabelle als HTMLCollection von HTMLTableSectionElement-Objekten, in Dokumentreihenfolge. Berücksichtigt werden nur direkte Kinder des <table>-Elements, <tbody>-Elemente verschachtelter Tabellen gehören nicht dazu.

Die Sammlung ist live: Wird ein <tbody> hinzugefügt (z. B. über createTBody()) oder entfernt, passt sich die bereits abgerufene Sammlung automatisch an. Die Eigenschaft selbst ist schreibgeschützt. Neue Abschnitte fügt man daher über DOM-Methoden ein, nicht per Zuweisung.

Typische Einsatzfälle sind Tabellen mit mehreren logisch gruppierten Zeilenblöcken, etwa Monatsgruppen in einem Bericht. Mit tBodies lassen sich solche Gruppen einzeln durchlaufen, sortieren, ein- und ausblenden oder für Zwischensummen auswerten. Den ersten Datenbereich einer Tabelle erreicht man meist über table.tBodies[0].

Rückgabewert

Typ

HTMLCollection<HTMLTableSectionElement>

Beschreibung

Live-Sammlung aller direkten <tbody>-Kinder der Tabelle. Hat die Tabelle keine, ist die Sammlung leer (length === 0), aber nie null.

Beispiele

Anzahl und Zeilen der Tabellenkörper ermitteln

// <table id="bericht">
//   <tbody><tr><td>Jan</td><td>120</td></tr><tr><td>Feb</td><td>80</td></tr></tbody>
//   <tbody><tr><td>Mär</td><td>200</td></tr></tbody>
// </table>
const table = document.querySelector('#bericht');

console.log(table.tBodies.length);
for (const [i, tbody] of [...table.tBodies].entries()) {
  console.log(`Gruppe ${i + 1}: ${tbody.rows.length} Zeilen`);
}

2 Gruppe 1: 2 Zeilen Gruppe 2: 1 Zeilen

Zwischensummen pro tbody berechnen

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

const summen = Array.from(table.tBodies, (tbody) =>
  Array.from(tbody.rows)
    .reduce((summe, row) => summe + Number(row.cells[1].textContent), 0)
);

console.log(summen);

[200, 200]

Live-Verhalten mit createTBody()

const table = document.createElement('table');
const bodies = table.tBodies; // einmal abrufen

console.log(bodies.length); // 0

const tbody = table.createTBody();
tbody.insertRow().insertCell().textContent = 'Neu';

console.log(bodies.length); // aktualisiert sich automatisch
console.log(bodies[0] === tbody);

0 1 true

Zeilen im ersten tbody alphabetisch sortieren

const table = document.querySelector('#bericht');
const tbody = table.tBodies[0];

const sortiert = [...tbody.rows].sort((a, b) =>
  a.cells[0].textContent.localeCompare(b.cells[0].textContent, 'de')
);

// append verschiebt vorhandene Knoten in der neuen Reihenfolge
tbody.append(...sortiert);

// Wichtig · Fallstricke

Implizites tbody: Der HTML-Parser legt automatisch ein <tbody> an, wenn <tr> direkt in <table> steht. In geparstem HTML ist tBodies.length dann also 1, obwohl im Quelltext kein <tbody> steht. Bei per DOM erzeugten Tabellen (appendChild einer tr) passiert das nicht. Eine Ausnahme ist table.insertRow(): Hat die Tabelle noch keine Zeilen und kein tbody, legt die Methode selbst eines an.
Schreibgeschützt: Eine Zuweisung an table.tBodies wird ignoriert, im Strict Mode wirft sie einen TypeError.
Live-Sammlung: Wenn man beim Durchlaufen tbody-Elemente entfernt, verschieben sich die Indizes. Deshalb vorher mit Array.from() bzw. Spread-Syntax kopieren. HTMLCollection hat kein forEach, for…of funktioniert aber.
<thead> und <tfoot> sind nicht enthalten. Dafür gibt es tHead und tFoot.
Die Eigenschaft wird von allen Browsern seit jeher unterstützt.

Siehe auch

HTMLTableElement.border HTMLTableElement.rows HTMLTableElement.rules HTMLTableElement.tFoot HTMLTableElement.align