HTMLTableRowElement.rowIndex — Eigenschaft · JavaScript-Referenz

Signatur

HTMLTableRowElement.rowIndex

Beschreibung

rowIndex gibt die nullbasierte Position einer Tabellenzeile in der Sammlung HTMLTableElement.rows der zugehörigen Tabelle zurück. Der Wert gilt für die ganze Tabelle: Kopf-, Rumpf- und Fußzeilen werden gemeinsam gezählt. Wenn du die Position innerhalb eines einzelnen Abschnitts brauchst (<thead>, <tbody> oder <tfoot>), nimm stattdessen sectionRowIndex.

Die Zählung richtet sich nach der logischen Reihenfolge von table.rows und nicht nach der Reihenfolge im Quelltext. Zuerst kommen die Zeilen aus <thead>, danach die Zeilen aus allen <tbody>-Elementen und die direkten <tr>-Kinder der Tabelle, jeweils in Dokumentreihenfolge. Die Zeilen aus <tfoot> kommen immer zuletzt. Ein <tfoot>, das im HTML vor dem <tbody> steht, bekommt also trotzdem die höchsten Indizes.

Typische Einsätze sind Klick-Handler in Datentabellen („Welche Zeile wurde angeklickt?“), das Löschen oder Einfügen von Zeilen über table.deleteRow() bzw. table.insertRow() und das Zuordnen einer Zeile zu einem Eintrag in einem Datenarray. Die Eigenschaft ist schreibgeschützt. Um eine Zeile zu verschieben, änderst du den DOM-Baum, danach wird rowIndex automatisch neu berechnet.

Rückgabewert

Typ

number

Beschreibung

Nullbasierter Index der Zeile in table.rows, oder -1, wenn die Zeile zu keiner Tabelle gehört (z. B. ein frisch erzeugtes, noch nicht eingefügtes <tr>).

Beispiele

Angeklickte Zeile per Event-Delegation ermitteln

// HTML: <table id="users"><thead><tr><th>Name</th></tr></thead>
//       <tbody><tr><td>Anna</td></tr><tr><td>Ben</td></tr></tbody></table>
const table = document.querySelector('#users');

table.addEventListener('click', (event) => {
  const row = event.target.closest('tr');
  if (!row || !table.contains(row)) return;
  console.log(`rowIndex: ${row.rowIndex}, sectionRowIndex: ${row.sectionRowIndex}`);
});
// Klick auf „Ben“

rowIndex: 2, sectionRowIndex: 1

Zeile über ihren Index aus der Tabelle löschen

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

table.addEventListener('click', (event) => {
  const button = event.target.closest('button.delete');
  if (!button) return;
  const row = button.closest('tr');
  // deleteRow erwartet einen tabellenweiten Index, daher passt rowIndex
  table.deleteRow(row.rowIndex);
});

Reihenfolge mit tfoot vor tbody im Quelltext

const table = document.createElement('table');
table.innerHTML = `
  <thead><tr><td>Kopf</td></tr></thead>
  <tfoot><tr><td>Summe</td></tr></tfoot>
  <tbody><tr><td>A</td></tr><tr><td>B</td></tr></tbody>`;

for (const row of table.rows) {
  console.log(row.textContent.trim(), row.rowIndex);
}

Kopf 0 A 1 B 2 Summe 3

Nicht eingefügte Zeile liefert -1

const row = document.createElement('tr');
console.log(row.rowIndex);

const table = document.createElement('table');
table.append(row);
console.log(row.rowIndex);

-1 0

// Wichtig · Fallstricke

Keine Datenposition: Weil <thead>-Zeilen mitgezählt werden, entspricht rowIndex meist nicht dem Index im Datenarray. Für den Datenzugriff ist sectionRowIndex innerhalb des <tbody> oder ein data-id-Attribut robuster.
Mehrere <tbody>: Die Zählung läuft über alle Rümpfe hinweg weiter. sectionRowIndex fängt dagegen in jedem Rumpf wieder bei 0 an.
Verschachtelte Tabellen: Der Index bezieht sich immer auf die nächstgelegene übergeordnete <table>. Bei Event-Delegation mit closest('tr') solltest du prüfen, ob die gefundene Zeile zur richtigen Tabelle gehört.
Schreibgeschützt: Eine Zuweisung wie row.rowIndex = 3 wird still ignoriert. Im Strict Mode wirft sie einen TypeError.
Performance: Der Wert wird bei jedem Zugriff neu berechnet. Wenn du ihn in großen Tabellen oft in Schleifen brauchst, speichere ihn besser zwischen.
Die Eigenschaft wird seit Langem von allen gängigen Browsern unterstützt.

Siehe auch

HTMLTableCellElement.noWrap HTMLTableRowElement.align HTMLTableRowElement.sectionRowIndex HTMLTableRowElement.vAlign HTMLTableRowElement.bgColor