Cette page a été traduite à partir de l'anglais par la communauté. Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.

View in English Always switch to English

HTMLTableRowElement : propriété rowIndex

Baseline Widely available

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>.

Valeur

L'index de la ligne, ou -1 si la ligne ne fait pas partie d'un tableau.

Exemples

Cet exemple utilise JavaScript pour afficher le numéro de chaque ligne dans un tableau.

HTML

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);
});

Résultat

Spécifications

Specification
HTML
# dom-tr-rowindex-dev

Compatibilité des navigateurs

Voir aussi