feed twitter facebook LinkedIn facebook

jQuery » Añadir una fila a una tabla con jQuery

Mayo 18, 2009 por Víctor Cuervo . 9750 visitas 9 Comentarios Imprimir Imprimir

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. <tr>
  4. <td>Dato 1.1</td>
  5. <td>Dato 1.2</td>
  6. <td>Dato 1.3</td>
  7. </tr>
  8. <tr>
  9. <td>Dato 2.1</td>
  10. <td>Dato 2.2</td>
  11. <td>Dato 2.3</td>
  12. </tr>
  13. <tr>
  14. <td>Dato 3.1</td>
  15. <td>Dato 3.2</td>
  16. <td>Dato 3.3</td>
  17. </tr>
  19.  

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 = '
  3. <tr>';
  4. for(var i = 0; i < n; i++){
  5.   tds += '
  6. <td>nuevo</td>
  7.  
  8. ';
  9. }
  10. tds += '</tr>
  11.  
  12. ';
  13.  

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

Visualizar el Codigo
Visualiza el artículo		Descargar el Codigo
Descargar el código		Error en el Codigo
Error en el código		Foro sobre jQuery
Foro sobre jQuery
tags: , , , , , , , ,

Artículos relacionados:

9 comentarios »

Redifusión RSS de los comentarios de la entrada. TrackBack URI

  1. foreverOdd
    Agosto 3, 2009 #

    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)

  2. Neysi
    Septiembre 26, 2009 #

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

  3. JManuel
    Mayo 20, 2010 #

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

  4. N4CH0
    Agosto 11, 2010 #

    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.

  5. k1r02
    Agosto 11, 2010 #

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

  6. anRoswell
    Enero 7, 2011 #

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

  7. lineadecodigo
    Enero 7, 2011 #

    @anRoswell, me alegro que te haya servido. :-D

  8. oxem
    Octubre 26, 2011 #

    hola que tal tengo una duda, como se gestiona un evento en donde se declara o de que forma , por ejemplo el evento click.

  9. GersonMaba
    Noviembre 29, 2011 #

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

Deje un comentario

XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Imagen CAPTCHA
*