HTMLTableSectionElement : propriété rows

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 rows de l'interface HTMLTableSectionElement retourne une collection (HTMLCollection) dynamique contenant les lignes de la section. L'objet HTMLCollection est dynamique et se met automatiquement à jour lorsque des lignes sont ajoutées ou supprimées.

Valeur

Une collection (HTMLCollection) dynamique d'objets HTMLTableRowElement.

Exemples

Dans cet exemple, deux boutons permettent d'ajouter et de supprimer des lignes de la section corps du tableau ; il met également à jour un élément HTML <output> avec le nombre de lignes actuellement dans le tableau.

HTML

html

<table>
  <thead>
    <tr>
      <th>Col 1</th>
      <th>Col 2</th>
      <th>Col 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>X</td>
      <td>Y</td>
      <td>Z</td>
    </tr>
  </tbody>
</table>
<button id="add">Ajouter une ligne</button>
<button id="remove">Supprimer la dernière ligne</button>
<div>Le corps de ce tableau contient <output>1</output> ligne(s).</div>

table {
  border-collapse: collapse;
}

th,
td {
  border: 1px solid black;
}

button {
  margin: 1em 1em 1em 0;
}

JavaScript

// Récupère les éléments d'interface pertinents
const bodySection = document.querySelectorAll("tbody")[0];
const rows = bodySection.rows; // La collection est dynamique, donc toujours à jour
const rowNumberDisplay = document.querySelectorAll("output")[0];

const addButton = document.getElementById("add");
const removeButton = document.getElementById("remove");

function updateRowNumber() {
  rowNumberDisplay.textContent = rows.length;
}

addButton.addEventListener("click", () => {
  // Ajoute une nouvelle ligne à la fin du corps
  const newRow = bodySection.insertRow();

  // Ajoute des cellules dans la nouvelle ligne
  ["A", "B", "C"].forEach(
    (elt) => (newRow.insertCell().textContent = `${elt}${rows.length}`),
  );

  // Met à jour le compteur de lignes
  updateRowNumber();
});

removeButton.addEventListener("click", () => {
  // Supprime la ligne du corps
  bodySection.deleteRow(-1);

  // Met à jour le compteur de lignes
  updateRowNumber();
});

Résultat

Spécifications

Specification
HTML # dom-tbody-rows

Compatibilité des navigateurs

Voir aussi

La propriété CSS text-align

Help improve MDN

Learn how to contribute

Cette page a été modifiée le ⁨19 janv. 2026⁩ par les contributeurs du MDN.

View this page on GitHub • Report a problem with this content