HTMLTableRowElement: sectionRowIndex property

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

We'd love to hear more about your role and the company you work for

Please help us by answering a few questions.

The sectionRowIndex read-only property of the HTMLTableRowElement interface represents the position of a row within the current section (<thead>, <tbody>, or <tfoot>).

Value

The index of the row, or -1 if the row is not part of the section.

Examples

This example uses JavaScript to label all the row numbers of the tbody.

HTML

html

<table>
  <thead>
    <tr>
      <th>Item</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Bananas</td>
      <td>$2</td>
    </tr>
    <tr>
      <td>Oranges</td>
      <td>$8</td>
    </tr>
    <tr>
      <td>Top Sirloin</td>
      <td>$20</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Total</td>
      <td>$30</td>
    </tr>
  </tfoot>
</table>

JavaScript

const rows = document.querySelectorAll("tbody tr");

rows.forEach((row) => {
  const z = document.createElement("td");
  z.textContent = `(row #${row.sectionRowIndex})`;
  row.appendChild(z);
});

Result

Specifications

Specification
HTML # dom-tr-sectionrowindex