HTMLTableRowElement : propriété rowIndex

Baseline Large disponibilité

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.

La propriété en lecture seule rowIndex de l'interface HTMLTableRowElement représente la position d'une ligne dans l'ensemble du <table>.

Même lorsque les éléments HTML <thead>, <tbody> et <tfoot> sont dans le désordre dans le HTML, les navigateurs affichent le tableau dans le bon ordre. Les lignes sont donc comptées de <thead> à <tbody>, puis de <tbody> à <tfoot>.

html
<table>
  <thead>
    <tr>
      <th>Article</th>
      <th>Prix</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Bananes</td>
      <td>2 €</td>
    </tr>
    <tr>
      <td>Oranges</td>
      <td>8 €</td>
    </tr>
    <tr>
      <td>Filet de boeuf</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 = `(ligne n°${row.rowIndex})`;
  row.appendChild(z);
});