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

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
insertCellChrome Support complet OuiEdge Support complet 12Firefox Support complet 1IE Support complet OuiOpera Support complet OuiSafari Support complet OuiWebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile Support complet OuiFirefox Android Support complet 4Opera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android Support complet Oui
Index parameter is optionalChrome Support complet OuiEdge Support complet OuiFirefox Support complet 20IE Support complet OuiOpera Support complet OuiSafari Support complet OuiWebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile Support complet OuiFirefox Android Support complet 20Opera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android Support complet Oui
Support for -1 as an index argumentChrome Support complet OuiEdge Support complet OuiFirefox Support complet 20IE Support complet OuiOpera Support complet OuiSafari Support complet OuiWebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile Support complet OuiFirefox Android Support complet 20Opera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android Support complet Oui

Légende

Support complet  
Support complet

Voir aussi

Étiquettes et contributeurs liés au document

Contributeurs à cette page : Watilin
Dernière mise à jour par : Watilin,