HTMLTableRowElement.insertCell()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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

js
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

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

js
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

Specification
HTML Standard
# dom-tr-insertcell-dev

Compatibilité des navigateurs

BCD tables only load in the browser

Voir aussi