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
