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.

io error: No such file or directory (os error 2) (/home/runner/work/yari/yari/mdn/translated-content/files/fr/web/api/html_dom_api/index.md)

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