HTMLTableRowElement: rowIndex 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.

TherowIndex read-only property of theHTMLTableRowElement interfacerepresents the position of a row within the whole<table>.

Even when the<thead>,<tbody>, and<tfoot> elements are out of order in the HTML, browsers render thetable in the right order. Therefore the rows count from<thead> to<tbody>, from<tbody> to<tfoot>.

Value

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

Examples

This example uses JavaScript to label all the row numbers in a table.

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("tr");rows.forEach((row) => {  const z = document.createElement("td");  z.textContent = `(row #${row.rowIndex})`;  row.appendChild(z);});