HTML: Markup language
CSS: Styling language
JavaScript: Scripting language
Web APIs: Programming interfaces
All web technology
Learn web development
Discover our tools
Get to know MDN better
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
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 HTMLTableSectionElement insère une nouvelle ligne (<tr>) dans l'élément de section de tableau donné (<thead>, <tfoot> ou <tbody>), puis retourne une référence vers cette nouvelle ligne.
insertRow()
HTMLTableSectionElement
<tr>
<thead>
<tfoot>
<tbody>
Note : insertRow() insère la ligne directement dans la section. Il n'est pas nécessaire d'ajouter la ligne séparément comme ce serait le cas si Document.createElement() avait été utilisé pour créer le nouvel élément HTML <tr>.
Document.createElement()
insertRow() insertRow(index)
index
L'indice de la nouvelle ligne. Si index vaut -1 ou est égal au nombre de lignes, la ligne est ajoutée en dernière position. Si index est omis, il prend la valeur -1 par défaut.
-1
Un objet HTMLTableRowElement qui référence la nouvelle ligne.
HTMLTableRowElement
IndexSizeError
DOMException
Levée si index est supérieur au nombre de lignes ou inférieur à -1.
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.
<output>
<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; }
// 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(); });
Activez JavaScript pour afficher ce tableau de compatibilité des navigateurs.
HTMLTableRowElement.insertCell()
HTMLTableElement.insertRow()