jump to navigation

Añadir una fila a una tabla con jQuery Mayo 18, 2009

Publicado por lineadecodigo en : jQuery , trackback

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

Articulos Similares:

|- Visualizar el ejemplo
|- Descargar el código
|- Reportar error en el código
|- Foro sobre jQuery

Enviar entrada por email Enviar entrada por email | Imprimir Imprimir | 4246 visitas

1 Star2 Stars3 Stars4 Stars5 Stars (Todavia sin evaluar)
Loading ... Loading ...

Tags:, , , , , , , ,

Comentarios»

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?




Si tienes dudas sobre jQuery no dudes en visitar el Foro sobre jQuery.
Imagen CAPTCHA CAPTCHA Audio
Refrescar imagen