HTMLTableElement : méthode insertRow()

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 méthode insertRow() de l'interface HTMLTableElement insère une nouvelle ligne (<tr>) dans un tableau (<table>) donné et retourne une référence vers la nouvelle ligne.

Si une table possède plusieurs éléments HTML <tbody>, par défaut, la nouvelle ligne est insérée dans le dernier <tbody>. Pour insérer la ligne dans une section spécifique, utilisez HTMLTableSectionElement.insertRow().

Note : insertRow() insère la ligne directement dans la table. La ligne n'a pas besoin d'être ajoutée séparément comme cela aurait été le cas si Document.createElement() avait été utilisé pour créer le nouvel élément <tr>.

Dans cet article

Syntaxe

js
insertRow()
insertRow(index)

HTMLTableElement est une référence à un élément HTML <table>.

On utilise ensuite HTMLTableRowElement.insertCell() pour insérer une nouvelle cellule dans la nouvelle ligne. (Pour être valide en HTML, un <tr> doit avoir au moins un élément <td>.) Enfin, on ajoute du texte à la cellule avec Document.createTextNode() et Node.appendChild().

HTML

html
<table id="mon-tableau">
  <tbody>
    <tr>
      <td>Ligne 1</td>
    </tr>
    <tr>
      <td>Ligne 2</td>
    </tr>
    <tr>
      <td>Ligne 3</td>
    </tr>
  </tbody>
</table>

JavaScript

js
function addRow(tableID) {
  // Récupérer une référence à la table
  let tableRef = document.getElementById(tableID);

  // Insérer une ligne à la fin du tableau
  let newRow = tableRef.insertRow(-1);

  // Insérer une cellule dans la ligne à l'indice 0
  let newCell = newRow.insertCell(0);

  // Ajouter un nœud texte à la cellule
  let newText = document.createTextNode("Nouvelle ligne inférieure");
  newCell.appendChild(newText);
}

// Appeler addRow() avec l'ID de la table
addRow("mon-tableau");