HTMLTableRowElement.insertCell()

La méthode HTMLTableRowElement.insertCell() insère une nouvelle cellule (<td>) dans une ligne de tableau (<tr>) et renvoie une référence sur cette cellule.

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

Syntaxe

var newCell = HTMLTableRowElement.insertCell(index);

HTMLTableRowElement est une référence sur un élément HTML <tr>.

Paramètres

index Facultatif

index est l’index de cellule de la nouvelle cellule. Si index est -1 ou égal au nombre actuel de cellules, la nouvelle cellule est ajoutée à la fin la ligne. Si index est supérieur au nombre de cellules, une exception IndexSizeError sera levée. Si index est omis, la valeur sera -1 par défaut.

Valeur de retour

newCell est une HTMLTableCellElement qui fait référence à la nouvelle cellule.

Exemple

Cet exemple utilise HTMLTableElement.insertRow() pour ajouter une nouvelle ligne à une table.

Nous utilisons ensuite insertCell(0) pour insérer une nouvelle cellule dans la nouvelle ligne (pour être du HTML valide, un <tr> doit avoir au moins un élément <td>). Enfin, nous ajoutons du texte à la cellule en utilisant Document.createTextNode() et Node.appendChild().

HTML

<table id="my-table">
  <tr><td>Row 1</td></tr>
  <tr><td>Row 2</td></tr>
  <tr><td>Row 3</td></tr>
</table>

JavaScript

function addRow(tableID) {
  // Obtient une référence sur la table
  let tableRef = document.getElementById(tableID);

  // Insère une ligne à la fin de la table
  let newRow = tableRef.insertRow(-1);

  // Insère une cellule dans la ligne à l’index 0
  let newCell = newRow.insertCell(0);

  // Ajoute un nœud texte à la cellule
  let newText = document.createTextNode('New bottom row');
  newCell.appendChild(newText);
}

// Appelle addRow() avec l’ID de la table
addRow('my-table');

Résultat

Spécifications

Spécification Statut Commentaire
HTML Living Standard
La définition de 'HTMLTableRowElement.insertCell()' dans cette spécification.
Standard évolutif  
Document Object Model (DOM) Level 2 HTML Specification
La définition de 'HTMLTableRowElement.insertCell()' dans cette spécification.
Obsolete Définition initiale.

Compatibilité des navigateurs

BCD tables only load in the browser

Voir aussi