Artículos
jQuery

Añadir una fila a una tabla con jQuery

18/May/2009

La idea de este ejemplo es posibilitar el añadir filas a una tabla mediante un botón. Para ello lo primero que hacemos es cargar el framework jQuery


Eso sí, asumiendo que tenemos una tabla en nuestro documento web:

Dato 1.1 Dato 1.2 Dato 1.3
Dato 2.1 Dato 2.2 Dato 2.3
Dato 3.1 Dato 3.2 Dato 3.3

Y el botón, claro está:


Es importante el ID que le demos al botón ya que, será a este ID al que le asignemos la función de añadir la fila a la tabla.

Para poder añadirle la funcionalidad de añadir una fila al botón «add» solamente tenemos que gestionar el evento click.

$("#add").click(function() {...}

Ahora vamos a lo verdaderamente interesante del ejemplo. Añadir la funcionalidad que añada la fila a la tabla dentro del evento click.

Lo primero que vamos a recuperar es el número de celdas de la tabla. Ya que añadiremos una fila con el número de celdas que tenga la tabla. Utilizaremos un selector que nos posicione en la última fila de la tabla (tr:last) y en el elemento td, el cual representa la celda. Sobre estos elementos aplicamos el método length para saber el número de celdas

var n = $('tr:last td', $("#mitabla")).length;

Ahora que sabemos el número de celdas, creamos una fila de una tabla. Puro HTML:

var tds = '';
for(var i = 0; i < n; i++){
  tds += 'nuevo';
}
tds += '';

Solo nos quedará añadir la fila que hemos creado al final de la tabla. Para ello utilizamos el método append(), sobre la tabla:

$("#mitabla").append(tds);

Vía: jQuery HowTo

Código Fuente

Descárgate el código fuente de Añadir una fila a una tabla con jQuery
Y si te ha gustado nuestro código fuente puedes regalarnos una estrella Star
Suscribir
Notificar de
guest
13 Comentarios
Recientes
Anteriores Más votados
Opiniones integradas
Ver todos los comentarios