Los últimos tutoriales de desarrollo web
 

Mesa insertRow() Method

<Tabla de objetos

Ejemplo

Insertar nueva row(s) en la primera posición de una tabla (e insertar un <td> elemento con un cierto contenido a él):

// Find a <table> element with id="myTable":
var table = document.getElementById("myTable");

// Create an empty <tr> element and add it to the 1st position of the table:
var row = table.insertRow(0);

// Insert new cells (<td> elements) at the 1st and 2nd position of the "new" <tr> element:
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);

// Add some text to the new cells:
cell1.innerHTML = "NEW CELL1";
cell2.innerHTML = "NEW CELL2";
Inténtalo tú mismo "

Definición y Uso

El insertRow() método crea un vacío <tr> elemento y lo añade a una mesa.

El insertRow() método inserta la nueva row(s) en el índice especificado en la tabla.

Nota: Un <tr> elemento debe contener uno o más <th> o <td> elementos.

Consejo: Utilice la deleteRow() método para eliminar una fila.


Soporte del navegador

Método
insertRow()

Sintaxis

tableObject .insertRow( Los valores de los parámetros
Valor Descripción
index Requerido en Firefox y Opera, opcional en el IE, Chrome y Safari. Un número que especifica la posición de la fila para insertar (empieza en 0). se inserta el valor de 0 resultados en que la nueva fila en la primera posición.

El valor de -1 también puede ser utilizado, esto resulta en una nueva fila se inserta en la última posición.

Este parámetro es necesario en Firefox y Opera, pero opcional en Internet Explorer, Chrome y Safari.

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

Detalles técnicos

Valor de retorno: La insertado <tr> elemento

Más ejemplos

Ejemplo

Crear y eliminar row(s) :

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);
}
Inténtalo tú mismo "

Páginas relacionadas

Referencia HTML: HTML <tr> etiqueta


<Tabla de objetos