Agregar filas a tabla con jQuery

A pedido de un amigo, explicar como agregar y eliminar filas a una tabla con un formato
especfico utilizando jQuery.
Para empezar, tenemos que crear nuestra tabla, para el ejemplo, una tabla simple, con campos
para nombre, apellidos, sexo, una columna para eliminar y debajo un botn para agregar filas.
Aqui el cdigo de ejemplo de la tabla:

<table id="tabla">
<!-- Cabecera de la tabla -->
<thead>
<tr>
<th>Nombre</th>
<th>Apellidos</th>
<th>Sexo</th>
<th>&nbsp;</th>
</tr>
</thead>

<!-- Cuerpo de la tabla con los campos -->

<tbody>

<!-- fila base para clonar y agregar al final -->

<tr class="fila-base">
<td><input type="text" class="nombre" /></td>
<td><input type="text" class="apellidos" /></td>
<td>
<select class="sexo">
<option value="0">- Sexo -</option>
<option value="M">Masculino</option>
<option value="F">Femenino</option>
</select>
</td>
<td class="eliminar">Eliminar</td>
</tr>
<!-- fin de cdigo: fila base -->

<!-- Fila de ejemplo -->

<tr>
<td><input type="text" class="nombre" /></td>
<td><input type="text" class="apellidos" /></td>
<td>
<select class="sexo">
<option value="0">- Sexo -</option>
<option value="M">Masculino</option>
<option value="F">Femenino</option>
</select>
</td>
<td class="eliminar">Eliminar</td>
</tr>
<!-- fin de cdigo: fila de ejemplo -->

</tbody>
</table>
<!-- Botn para agregar filas -->
<input type="button" id="agregar" value="Agregar fila" />

Para empezar tenemos una tabla simple, con una cabecera con los ttulos de cada campo, y
una fila base la cual estar oculta por defecto, ya que la utilizaremos como formato para
agregar las nuevas filas, y al final una fila de ejemplo la cual est visible.

A continuacin unos cuantos estilos, para que se vea mejor nuestra tabla:

<style type="text/css">

#tabla{ border: solid 1px #333; width: 300px; }

#tabla tbody tr{ background: #999; }
.fila-base{ display: none; } /* fila base oculta */
.eliminar{ cursor: pointer; color: #000; }
input[type="text"]{ width: 80px; } /* ancho a los elementos input="text" */

</style>

Bueno, ahora viene jQuery, que se encargar de los eventos de agregar y eliminar las filas:

<script type="text/javascript">

$(function(){
// Clona la fila oculta que tiene los campos base, y la agrega al final de
la tabla
$("#agregar").on('click', function(){
$("#tabla tbody tr:eq(0)").clone().removeClass('fila-
base').appendTo("#tabla tbody");
});

// Evento que selecciona la fila y la elimina

$(document).on("click",".eliminar",function(){
var parent = $(this).parents().get(0);
$(parent).remove();
});
});

</script>

$(#agregar), es el encargado de ejecutar la funcin de agregado de la fila.

$(#tabla tbody tr:eq(0)).clone().removeClass(fila-base).appendTo(#tabla tbody), esta
es la parte ms importante, y parece ser la ms complicada, pero lo explicar paso a paso:

1. $(#tabla tbody tr:eq(0)), es un selector algo confuso, pero es simple, solo es necesario
avanzar por pasos: seleccionamos la tabla(#tabla), seguimos con el cuerpo de la tabla(tbody),
la primer fila del cuerpo(tr:eq(0), el cero indica la posicin, osea el cero es el primer elemento).
2. .clone(), clonamos lo que acabamos de seleccionar en el paso 1.
3. removeClass(fila-base), quitamos la clase CSS fila-base (la que mantiene oculta nuestra
fila base), mucha atencin en este punto: al remover la clase fila-base lo estamos haciendo
al clon de nuestra fila base.
4. .appendTo(#tabla tbody), agregamos el clon al cuerpo de la tabla #tabla tbody, por
defecto siempre se agrega al final o como ltimo elemento.

$(document).on(click,.eliminar,function(), el selector que ejecuta la tarea de eliminar al

hacer click sobre la celda eliminar.
var parent = $(this).parents().get(0);, $(this).parents(): selecciona los padres de la celda
eliminar o en otras palabras los elementos superiores y con .get(0) seleccionamos el primer
elemento superior, para dejarlo ms fcil: el elemento superior de una celda(<td>) es una
fila(<tr>).
$(parent).remove();, eliminamos o removemos la fila seleccionada.
.on, usamos .on() porque en las ultimas versiones de jQuery, esta es la nueva forma de utilizar
los eventos, con el plus de que tambin funciona con los nuevos elemento incrustados al DOM,
aadiendo los eventos automticamente, reemplazando a la funcion .live(), la cual es obsoleta.

Me estaba olvidando de dejar el ejemplo funcionando XD: