HTMLTableRowElement.sectionRowIndex — Eigenschaft · JavaScript-Referenz

Signatur

HTMLTableRowElement.sectionRowIndex

Beschreibung

Die schreibgeschützte Eigenschaft sectionRowIndex gibt an, an welcher Stelle eine <tr>-Zeile innerhalb ihres direkten Tabellenabschnitts steht. Gezählt wird ab 0, und zwar nur innerhalb des jeweiligen <thead>, <tbody> oder <tfoot>. Die erste Zeile jedes <tbody> hat also immer den Index 0.

Das Gegenstück dazu ist rowIndex. Diese Eigenschaft zählt über die ganze Tabelle hinweg, und zwar in der logischen Reihenfolge thead → tbody → tfoot. sectionRowIndex ist dann nützlich, wenn du mit Daten arbeitest, die zu einem bestimmten Abschnitt gehören. Ein Beispiel: Du willst eine angeklickte Zeile im tbody dem passenden Eintrag in einem Daten-Array zuordnen, ohne die Kopfzeilen herauszurechnen.

Der Wert entspricht dem Index der Zeile in der Sammlung rows des übergeordneten Abschnitts. Es gilt also row.parentElement.rows[row.sectionRowIndex] === row. Gehört die Zeile zu keinem Abschnitt, etwa weil sie losgelöst per document.createElement('tr') erzeugt wurde, ist der Wert -1.

Rückgabewert

Typ

number

Beschreibung

Nullbasierter Index der Zeile in ihrem Abschnitt. -1, wenn die Zeile zu keinem Abschnitt gehört.

Beispiele

Index im Abschnitt und in der Tabelle vergleichen

document.body.innerHTML = `
  <table id="t">
    <thead><tr><th>Name</th></tr></thead>
    <tbody>
      <tr><td>Anna</td></tr>
      <tr><td>Ben</td></tr>
    </tbody>
  </table>`;

const rows = document.querySelectorAll('#t tr');
rows.forEach((row) => {
  console.log(row.textContent.trim(), row.sectionRowIndex, row.rowIndex);
});

Name 0 0 Anna 0 1 Ben 1 2

Angeklickte Zeile dem Daten-Array zuordnen

const users = [
  { id: 7, name: 'Anna' },
  { id: 12, name: 'Ben' }
];

const table = document.createElement('table');
table.createTHead().insertRow().insertCell().textContent = 'Name';
const tbody = table.createTBody();
users.forEach((u) => (tbody.insertRow().insertCell().textContent = u.name));
document.body.append(table);

tbody.addEventListener('click', (event) => {
  const row = event.target.closest('tr');
  if (!row) return;
  // Kopfzeilen müssen nicht herausgerechnet werden
  const user = users[row.sectionRowIndex];
  console.log(`Ausgewählt: ${user.name} (ID ${user.id})`);
});

tbody.rows[1].cells[0].click();

Ausgewählt: Ben (ID 12)

Losgelöste Zeile und Zeilen löschen

const tr = document.createElement('tr');
console.log(tr.sectionRowIndex); // noch in keinem Abschnitt

const tbody = document.createElement('tbody');
tbody.append(document.createElement('tr'), tr);
console.log(tr.sectionRowIndex);

// Zeile über ihren Index im Abschnitt entfernen
tbody.deleteRow(tr.sectionRowIndex);
console.log(tbody.rows.length);

-1 1 1

// Wichtig · Fallstricke

Schreibgeschützt: Eine Zuweisung wie row.sectionRowIndex = 2 wird still ignoriert und löst im Strict Mode einen TypeError aus. Wenn du Zeilen verschieben willst, nimm DOM-Methoden wie insertBefore() oder before().
Mehrere <tbody>: Jeder Abschnitt zählt wieder ab 0. Der Wert ist daher nicht tabellenweit eindeutig. Dafür gibt es rowIndex.
Implizites <tbody>: Wenn der HTML-Parser eine Tabelle ohne <tbody> liest, ergänzt er es automatisch. Wird eine <tr> dagegen per DOM direkt in eine <table> eingefügt, zählt die Tabelle selbst als Abschnitt.
Live-Wert: Der Index wird bei jedem Zugriff neu berechnet. Nach Sortieren, Einfügen oder Löschen stimmen zwischengespeicherte Werte nicht mehr. Speichere für eine feste Zuordnung besser eine ID in einem data-*-Attribut.
Kompatibilität: Wird von allen modernen Browsern seit Langem unterstützt, auch vom alten Internet Explorer.

Siehe auch

HTMLTableRowElement.rowIndex HTMLTableRowElement HTMLTableSectionElement.rows HTMLTableSectionElement.deleteRow() HTMLTableCellElement.cellIndex HTMLTableCellElement.scope HTMLTableRowElement.align