The HTMLTableRowElement.rowIndex
read-only property represents the position of a row in relation to 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>
.
Syntax
var index = HTMLTableRowElement.rowIndex
Value
Returns the index of the row, or -1
if the row is not part of a table.
Example
This example uses JavaScript to label all the row numbers in a table.
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
let rows = document.querySelectorAll('tr'); rows.forEach((row) => { let z = document.createElement("td"); z.textContent = `(row #${row.rowIndex})`; row.appendChild(z); });
Result
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
rowIndex | Chrome Full support Yes | Edge Full support 12 | Firefox Full support 1 | IE Full support Yes | Opera Full support Yes | Safari Full support Yes | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support 4 | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support Yes |
Legend
- Full support
- Full support