HTMLTableElement : méthode insertRow()
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 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>.
Syntaxe
insertRow()
insertRow(index)
HTMLTableElement est une référence à un élément HTML <table>.
Paramètres
indexFacultatif-
L'indice de la nouvelle ligne. Si
indexvaut-1ou est égal au nombre de lignes, la ligne est ajoutée comme dernière ligne. Siindexest omis, sa valeur par défaut est-1.
Valeur de retour
Un objet HTMLTableRowElement qui référence la nouvelle ligne.
Exceptions
IndexSizeErrorDOMException-
Levée si
indexest supérieur au nombre de lignes.
Exemples
Cet exemple utilise insertRow(-1) pour ajouter une nouvelle ligne à un tableau.
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
<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
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");
Résultat
Spécifications
| Specification |
|---|
| HTML # dom-table-insertrow-dev |
Compatibilité des navigateurs
Voir aussi
- La méthode
HTMLTableRowElement.insertCell()