HTMLTableRowElement.insertCell()

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

Compatibilité des navigateurs

Voir aussi

• HTMLTableElement.insertRow()
• L'élément HTML représentant les cellules : HTMLTableCellElement