Añadir una fila a una tabla con jQuery

18/May/2009 jQuery , , , 12 Comentarios
programación jquery en español

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

  1.  
  2. <script type="text/javascript" src="jquery.js"></script>
  3.  

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

  1.  
  2. <table border="1" id="mitabla">
  3. <td>Dato 1.1</td>
  4. <td>Dato 1.2</td>
  5. <td>Dato 1.3</td>
  6. </tr>
  7. <td>Dato 2.1</td>
  8. <td>Dato 2.2</td>
  9. <td>Dato 2.3</td>
  10. </tr>
  11. <td>Dato 3.1</td>
  12. <td>Dato 3.2</td>
  13. <td>Dato 3.3</td>
  14. </tr>
  15. </table>
  16.  

Y el botón, claro está:

  1.  
  2. <button id="add">Añadir Fila</button>
  3.  

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.

  1.  
  2. $("#add").click(function() {...}
  3.  

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

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

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

  1.  
  2. var tds = '<tr>';
  3. for(var i = 0; i < n; i++){
  4. tds += '<td>nuevo</td>';
  5. }
  6. tds += '</tr>';
  7.  

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:

  1.  
  2. $("#mitabla").append(tds);
  3.  

Vía: jQuery HowTo

Vídeos sobre jQuery


12 comentarios en “Añadir una fila a una tabla con jQuery”

Víctor Cuervo

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

Víctor Cuervo

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

Víctor Cuervo

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…

Víctor Cuervo

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.-

Víctor Cuervo

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.

Víctor Cuervo

anRoswell

Muy bueno me sirvió, y con el clone se ahorra uno mucho mas codigo, pero cada uno tiene su uso en diferentes circunstancias!!!

Víctor Cuervo

lineadecodigo

@anRoswell, me alegro que te haya servido. 😀

Víctor Cuervo

k1r02

ok eso es para aumentar a demanda y que pasa si quieres eliminar una fila ?, como sería la sintaxis?

Víctor Cuervo

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.

Víctor Cuervo

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!!!

Víctor Cuervo

Neysi

Muchas gracias. El mejor ejemplo visto gracias ayudaste bastante en mi proyecto. Sigue adelante con tu blog que tiene muy buenos artículos

Víctor Cuervo

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)

¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

*

*