HTMLTableElement.rows — Eigenschaft · JavaScript-Referenz

Signatur

get HTMLTableElement.rows

Beschreibung

Die Eigenschaft rows eines HTMLTableElement liefert eine Live-HTMLCollection mit allen <tr>-Elementen, die direkte Kinder der Tabelle sind oder direkte Kinder eines ihrer <thead>-, <tbody>- oder <tfoot>-Abschnitte. Zeilen aus verschachtelten Tabellen gehören nicht dazu.

Die Reihenfolge ist fest vorgegeben: zuerst die Zeilen aus <thead>, dann alle Zeilen aus <tbody>-Abschnitten und direkte <tr>-Kinder in Dokumentreihenfolge, zuletzt die Zeilen aus <tfoot>. Das gilt auch dann, wenn <tfoot> im Markup vor dem <tbody> steht.

„Live“ bedeutet: Wenn Sie Zeilen hinzufügen oder entfernen, etwa mit insertRow() oder deleteRow(), aktualisiert sich die Sammlung sofort. Die Eigenschaft selbst ist schreibgeschützt. Sie können ihr also keine neue Sammlung zuweisen, sondern nur über die DOM-Methoden eingreifen.

Typische Einsatzfälle sind das Zählen von Zeilen, das Durchlaufen aller Zeilen zum Auswerten oder Einfärben, und der gezielte Zugriff über den Index, zum Beispiel table.rows[0] für die Kopfzeile.

Rückgabewert

Typ

HTMLCollection<HTMLTableRowElement>

Beschreibung

Live-Sammlung aller Zeilen der Tabelle in der Reihenfolge thead → tbody/direkte Zeilen → tfoot. Hat die Tabelle keine Zeilen, ist die Sammlung leer (length === 0).

Beispiele

Zeilen zählen und auf die Kopfzeile zugreifen

// <table id="preise"><thead><tr><th>Produkt</th><th>Preis</th></tr></thead>
// <tbody><tr><td>Apfel</td><td>0.50</td></tr><tr><td>Birne</td><td>0.80</td></tr></tbody></table>
const table = document.querySelector('#preise');

console.log(table.rows.length);
console.log(table.rows[0].cells[0].textContent);
console.log(table.rows.item(2).cells[0].textContent);

3 Produkt Birne

Summe einer Spalte berechnen (nur tbody-Zeilen)

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

// HTMLCollection in ein Array umwandeln, um filter/reduce nutzen zu können
const summe = Array.from(table.rows)
  .filter((row) => row.parentElement.tagName === 'TBODY')
  .reduce((acc, row) => acc + Number(row.cells[1].textContent), 0);

console.log(`Gesamt: ${summe.toFixed(2)} €`);

Gesamt: 1.30 €

Live-Verhalten beim Einfügen und Löschen

const table = document.querySelector('#preise');
const rows = table.rows; // Referenz einmal holen

console.log(rows.length);

const neu = table.tBodies[0].insertRow();
neu.insertCell().textContent = 'Kiwi';
neu.insertCell().textContent = '0.30';
console.log(rows.length); // automatisch aktualisiert

table.deleteRow(-1); // letzte Zeile entfernen
console.log(rows.length);

3 4 3

Zebra-Streifen mit for...of

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

let i = 0;
for (const row of table.rows) {
  row.classList.toggle('ungerade', i % 2 === 1);
  i++;
}

// Wichtig · Fallstricke

Live-Sammlung beim Löschen: Wenn Sie in einer Vorwärtsschleife Zeilen entfernen, verschieben sich die Indizes, und dabei werden Zeilen übersprungen. Laufen Sie deshalb rückwärts (for (let i = rows.length - 1; i >= 0; i--)) oder erzeugen Sie vorher mit Array.from(table.rows) eine statische Kopie.
Kein Array: HTMLCollection hat keine Methoden wie map, filter oder forEach. Verwenden Sie Array.from() oder den Spread-Operator. for...of funktioniert dagegen direkt.
Kopf- und Fußzeilen sind enthalten: Wer nur Datenzeilen braucht, nimmt table.tBodies[0].rows.
Verschachtelte Tabellen werden nicht berücksichtigt. Im Gegensatz dazu würde table.querySelectorAll('tr') auch deren Zeilen finden. Außerdem liefert querySelectorAll eine statische NodeList.
Die Reihenfolge folgt nicht unbedingt dem Markup: <tfoot>-Zeilen stehen immer am Ende.
Kompatibilität: Die Eigenschaft wird seit DOM Level 1 in allen Browsern unterstützt. for...of über HTMLCollection setzt ES2015 voraus.

Siehe auch

HTMLTableElement.rules HTMLTableElement.frame HTMLTableElement.tFoot HTMLTableElement.align HTMLTableElement.border