Método insertCell() de TableRow

Objeto TableRow del DOM HTML

Definición y uso

insertCell() El método inserta la celda en la fila actual.

Consejo:Utilice Método deleteCell() Eliminar la celda actual de la fila de la tabla.

Vea también:

Manual de Referencia de HTML:Etiqueta <tr> de HTML

Ejemplo

Ejemplo 1

Insertar una nueva celda con contenido al principio de la fila de tabla con id="myRow":

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

Prueba por tu cuenta

A continuación, se proporcionan más ejemplos en la parte inferior de la página.

gramática

tablerowObject.insertCell()índice)
Parámetros Descripción
índice

Es obligatorio en Firefox y Opera, y opcional en IE, Chrome y Safari.

Número (que comienza en 0), que especifica la posición de la nueva celda en la fila actual.

El valor 0 causará que la nueva celda se inserte en la primera posición. También se puede usar el valor -1, lo que causará que la nueva celda se inserte en la última posición.

Si se omite este parámetro, en IE insertCell() lo insertará en la última posición, en Chrome y Safari en la primera posición.

Detalles técnicos

Valor devuelto:

Elemento de celda insertado.

Compatibilidad con navegadores

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Soporte Soporte Soporte Soporte Soporte

Más ejemplos

Ejemplo 2

Insertar una nueva celda con contenido al final de la fila del表格 con id="myRow":

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

Prueba por tu cuenta

Ejemplo 3

Insertar una nueva celda con contenido en la posición de índice 2 de la fila del表格 con id="myRow":

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

Prueba por tu cuenta

Ejemplo 4

Insertar una nueva celda en el principio de la primera fila del表格. La colección rows (.rows[0]) del表格 devuelve la colección de todos los elementos <tr> del表格 con id "myTable".

El número [0] especifica el elemento que se debe buscar, en este caso, es la primera fila del表格. Luego utilizamos insertcell() para insertar una nueva celda en la posición de índice -1:

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

Prueba por tu cuenta

Ejemplo 5

Eliminar la primera celda de la fila del表格 con id="myRow":

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

Prueba por tu cuenta

Ejemplo 6

Insertar una nueva fila en el principio del表格.

El método insertRow() inserta una nueva fila en la posición especificada del表格，en este ejemplo, en la primera posición (principio) del表格 con id="myTable".

Luego utilizamos el método insertCell() para agregar celdas en la nueva fila.

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";

Prueba por tu cuenta

Objeto TableRow del DOM HTML