Méthode insertCell() de TableRow

Objet TableRow DOM HTML

Définition et utilisation

insertCell() La méthode insère la cellule dans la ligne actuelle.

Astuce :Utilisez Méthode deleteCell() Supprimer la cellule actuelle de la ligne de tableau.

Voir également :

Manuel de référence HTML :Balise <tr> HTML

Exemple

Exemple 1

Insérer une nouvelle cellule contenant du contenu au début de la ligne de tableau avec id="myRow":

var row = document.getElementById("myRow");
var x = row.insertCell(0);
x.innerHTML = "New cell";

Essayez-le vous-même

Plus d'exemples sont fournis en bas de la page.

grammaire

tablerowObject.insertCell()index)
Paramètres Description
index

Obligatoire dans Firefox et Opera, optionnel dans IE, Chrome et Safari.

Numérique (commençant à 0), spécifie la position de la nouvelle cellule dans la ligne actuelle.

La valeur 0 entraînera l'insertion de la nouvelle cellule à la première position. Vous pouvez également utiliser la valeur -1, ce qui entraînera l'insertion de la nouvelle cellule à la dernière position.

Si ce paramètre est omis, insertCell() insérera une nouvelle cellule à la dernière position dans IE, à la première position dans Chrome et Safari.

Détails techniques

Valeur de retour :

Élément de cellule inséré.

Support du navigateur

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Support Support Support Support Support

Plus d'exemples

Exemple 2

Insérer une nouvelle cellule contenant du contenu à la fin de la ligne de tableau d'ID="myRow":

var row = document.getElementById("myRow");
var x = row.insertCell(-1);
x.innerHTML = "New cell";

Essayez-le vous-même

Exemple 3

Insérer une nouvelle cellule contenant du contenu à l'indice 2 de la ligne de tableau d'ID="myRow":

var row = document.getElementById("myRow");
var x = row.insertCell(2);
x.innerHTML = "New cell";

Essayez-le vous-même

Exemple 4

Insérer une nouvelle cellule au début de la première ligne de tableau. Le jeu de rows (.rows[0]) retourne la collection de tous les éléments <tr> du tableau d'ID "myTable".

Le nombre [0] spécifie l'élément à rechercher, dans cet exemple, c'est la première ligne de tableau. Ensuite, nous utilisons insertcell() pour insérer une nouvelle cellule à l'indice -1:

var firstRow = document.getElementById("myTable").rows[0];
var x = firstRow.insertCell(-1);
x.innerHTML = "New cell";

Essayez-le vous-même

Exemple 5

Supprimer la première cellule de la ligne de tableau d'ID="myRow":

var row = document.getElementById("myRow");
row.deleteCell(0);

Essayez-le vous-même

Exemple 6

Insérer une nouvelle ligne au début du tableau.

La méthode insertRow() insère une nouvelle ligne à l'indice spécifié dans le tableau, dans cet exemple, à la première position (au début) du tableau d'ID="myTable".

Puis nous utilisons la méthode insertCell() pour ajouter une cellule dans la nouvelle ligne.

var table = document.getElementById("myTable");
var row = table.insertRow(0);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
cell1.innerHTML = "NEW CELL1";
cell2.innerHTML = "NEW CELL2";

Essayez-le vous-même

Objet TableRow DOM HTML