HTMLTableSectionElement.rows — Eigenschaft · JavaScript-Referenz

Signatur

HTMLTableSectionElement.rows

Beschreibung

Die Eigenschaft rows eines HTMLTableSectionElement (also eines <thead>-, <tbody>- oder <tfoot>-Elements) gibt eine HTMLCollection mit allen HTMLTableRowElement-Objekten zurück, die direkte Kinder dieses Abschnitts sind. Zeilen aus verschachtelten Tabellen gehören nicht dazu.

Die Sammlung ist live: Fügt man mit insertRow() Zeilen hinzu oder entfernt sie mit deleteRow() bzw. remove(), ist das sofort in rows zu sehen, ohne dass man die Eigenschaft neu abfragen muss. Die Eigenschaft selbst ist schreibgeschützt. Man kann ihr also keine neue Sammlung zuweisen, sondern nur über die DOM-Methoden die Zeilen ändern.

Typische Einsatzfälle sind das Zählen der Datenzeilen in einem <tbody>, das Durchlaufen von Zeilen zum Sortieren oder Filtern und der Zugriff auf eine bestimmte Zeile über ihren Index. Anders als HTMLTableElement.rows, das alle Zeilen der ganzen Tabelle enthält, beschränkt sich diese Eigenschaft auf einen einzelnen Abschnitt. So bleiben z. B. Kopfzeilen bei der Auswertung außen vor.

Rückgabewert

Typ

HTMLCollection<HTMLTableRowElement>

Beschreibung

Eine live aktualisierte, schreibgeschützte Sammlung der <tr>-Elemente, die direkte Kinder des Abschnitts sind. Enthält der Abschnitt keine Zeilen, ist die Sammlung leer (length === 0).

Beispiele

Datenzeilen eines tbody zählen

// <table id="produkte">
//   <thead><tr><th>Name</th><th>Preis</th></tr></thead>
//   <tbody><tr><td>Apfel</td><td>0.5</td></tr><tr><td>Brot</td><td>2.2</td></tr></tbody>
// </table>
const tbody = document.querySelector('#produkte tbody');
console.log(`Anzahl Produkte: ${tbody.rows.length}`);
console.log(tbody.rows[0].cells[0].textContent);

Anzahl Produkte: 2 Apfel

Live-Verhalten beim Einfügen und Löschen

const tbody = document.querySelector('#produkte tbody');
const zeilen = tbody.rows; // einmal abfragen

const neu = tbody.insertRow();
neu.insertCell().textContent = 'Käse';
neu.insertCell().textContent = '4.9';
console.log(zeilen.length); // wird automatisch aktualisiert

tbody.deleteRow(0);
console.log(zeilen.length, zeilen[0].cells[0].textContent);

3 2 Brot

Zeilen nach Preis sortieren

const sortiereNachPreis = (tbody) => {
  // Array.from erzeugt eine statische Kopie der Live-Sammlung
  const sortiert = Array.from(tbody.rows).sort(
    (a, b) => Number(a.cells[1].textContent) - Number(b.cells[1].textContent)
  );
  // append verschiebt vorhandene Knoten in der neuen Reihenfolge
  tbody.append(...sortiert);
};

const tbody = document.querySelector('#produkte tbody');
sortiereNachPreis(tbody);
console.log([...tbody.rows].map((tr) => tr.cells[0].textContent));

["Brot", "Käse"]

Leere Zeilen entfernen (rückwärts iterieren)

const tbody = document.querySelector('#produkte tbody');
// Rückwärts laufen, weil sich die Live-Sammlung beim Löschen verschiebt
for (let i = tbody.rows.length - 1; i >= 0; i--) {
  if (tbody.rows[i].textContent.trim() === '') {
    tbody.deleteRow(i);
  }
}
console.log(`Verbleibend: ${tbody.rows.length}`);

Verbleibend: 2

// Wichtig · Fallstricke

Live-Sammlung: Wer in einer Vorwärtsschleife Zeilen löscht, überspringt Einträge, weil sich die Indizes verschieben. Entweder rückwärts iterieren oder vorher mit Array.from(section.rows) eine statische Kopie anlegen.
HTMLCollection ist kein Array und hat weder map() noch filter(). Vorher mit Array.from() oder dem Spread-Operator umwandeln. for...of funktioniert dagegen direkt.
Es zählen nur direkte <tr>-Kinder. Zeilen aus verschachtelten Tabellen sind nicht enthalten.
Der HTML-Parser legt automatisch ein <tbody> an, wenn <tr> direkt in einer <table> steht. table.tBodies[0].rows funktioniert deshalb auch dann, wenn im Quelltext kein <tbody> steht. Bei Tabellen, die per DOM-API erzeugt werden, gilt das nicht.
Die Eigenschaft ist schreibgeschützt. Eine Zuweisung wird im nicht-strikten Modus stillschweigend ignoriert und löst im strikten Modus einen TypeError aus.
Kompatibilität: wird seit Jahren von allen Browsern unterstützt (Baseline).

Siehe auch

HTMLTableSectionElement.ch HTMLTableSectionElement.chOff HTMLTableSectionElement.align HTMLTableSectionElement.vAlign HTMLTableElement.rows