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.
The rowIndex read-only property of the HTMLTableRowElement interface represents 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 the table 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
js
const rows = document.querySelectorAll("tr"); rows.forEach((row) => { const z = document.createElement("td"); z.textContent = `(row #${row.rowIndex})`; row.appendChild(z); }); Result
Specifications
| Specification |
|---|
| HTML # dom-tr-rowindex-dev |