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
oscar
como hago para que tome el valor de cada una de las filas agregadas del lado del servidor? de ser posible en jsp. Por lo menos una idea.
Gracias.
Oscar
fer
y si en las filas copiada tengo inputs y quiero hacer digamos un calculo de un importe como puedo obtener los calores de los input de la misma fila, ya q como las filas son clonadas no puedo identificar dichos inputs con un identificador diferente
Julio899
Muchas gracias por el Aporte Se agradece Muchísimo…
y para GersonMaba no se si respondo demasiado tarde Yo reinicie mi tabla de la siguiente manera –>
var tabla=document.getElementById(‘tabla_resultados’);
tabla.tBodies[0].innerHTML=»;
espero que te sirva saludos…
GersonMaba
Hola…..
Gran Ejemplo, me fue de mucha Ayuda… Solo tengo una pregunta..Como se haria para reiniciar la tabla, o volver a dejar el numero de filas en 0, o quitarle Filas?¡
gracias.-
oxem
hola que tal tengo una duda, como se gestiona un evento en donde se declara o de que forma , por ejemplo el evento click.
anRoswell
Muy bueno me sirvió, y con el clone se ahorra uno mucho mas codigo, pero cada uno tiene su uso en diferentes circunstancias!!!
lineadecodigo
@anRoswell, me alegro que te haya servido. :-D
k1r02
ok eso es para aumentar a demanda y que pasa si quieres eliminar una fila ?, como sería la sintaxis?
N4CH0
tengo una tabla digamos de 3×3, que contiene numeros, al añadir la nueva fila a la tabla, el problema es que tengo que poner los valores de la columna en la nueva fila creada. Como puedo hacer eso, agradeceria mucho su ayuda.
JManuel
y si quisieramos meter input de texto en la tabla como puedo identificarlos despues dentro de un formulario
por ejemplo y obvio se crean tres cuadros de textos con forme a este ejemplo com saber cual es X1 o X2 y X3 ?
alguien sabe!!!
Neysi
Muchas gracias. El mejor ejemplo visto gracias ayudaste bastante en mi proyecto. Sigue adelante con tu blog que tiene muy buenos artículos
foreverOdd
No seria mas facil simplemente clonar, limpiar lo clonado y agregarlo a la tabla??
fila = $(«table tr:last»).clone(true)
fila.empty();
$(«table»).append(fila)
Limbano
pero si dentro del clonado quiero cambiar el id de algun input ¿como lo haría?