Método insertRow() de la tabla

Objeto Table del DOM HTML

Definición y uso

insertRow() El método crea una <tr> vacía Elemento <tr> y agregarla a la tabla.

insertRow() El método inserta una nueva fila en la posición especificada en la tabla.

Atención:El elemento <tr> debe contener elementos <th> o <td>.

Consejo:Utilice Método deleteRow() Eliminar una fila.

Vea también:

Manual de HTML:Etiqueta <tr> de HTML

Ejemplo

Ejemplo 1

Insertar una nueva línea en la primera posición de la tabla (y agregar elementos <td> con contenido):

// Encontrar el elemento <table> con id="myTable":
var table = document.getElementById("myTable");
// Crear un elemento <tr> vacío y agregarlo a la primera posición de la tabla:
var row = table.insertRow(0);
// Insertar nuevas celdas (<td>) en la primera y segunda posición del elemento <tr> "nuevo":
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
// Añadir texto en las nuevas celdas:
cell1.innerHTML = "NEW CELL1";
cell2.innerHTML = "NEW CELL2";

Prueba por ti mismo

Ejemplo 2

Creación y eliminación de filas:

function myCreateFunction() {
  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";
}
function myDeleteFunction() {
  document.getElementById("myTable").deleteRow(0);
}

Prueba por ti mismo

Sintaxis

tableObject.insertRow(index)
Parámetro Descripción
index

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

Número que especifica la posición de la línea que se debe insertar (se comienza en 0). El valor 0 causará que la nueva línea se inserte en la primera posición.

También se puede usar el valor -1, lo que causará la inserción de una nueva línea en la última posición.

Si se omite este parámetro, insertRow() inserta una nueva fila en la última posición de Chrome, IE, Firefox y Opera, y en la primera posición de Safari.

Detalles técnicos

Valor devuelto: Elemento <tr> insertado.

Compatibilidad del navegador

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

Objeto Table del DOM HTML