Añadir y eliminar filas de una tabla

En este artículo vamos a aprender a añadir y eliminar filas de una tabla en Jquery, esto puede resultar muy útil en formularios en los que necesitamos insertar información o determinados archivos.

Vamos a suponer el siguiente caso (situación real):

Hemos realizado una aplicación para realizar y enviar ofertas a clientes. Una oferta consta de uno o varios artículos o servicios, por lo que necesitaremos ir añadiendo o quitando líneas según el número de artículos que queramos tener en la oferta. todo esto lo vamos a hacer en una tabla para dejarlo más elegante, de forma que nos quede algo así:

añadir y eliminar filas de una tabla en jquery

La tabla constará de 1 fila (que será la que podamos añadir o quitar) y 7 columnas (marca de checkbox, registro, artículo, unidades, superficie, concepto y precio). Dado que las filas serán para rellenar, la tabla hará de formulario.

Pasos para añadir y eliminar filas de una tabla en jquery

1- Preparamos el html

Como hemos dicho lo primero que habrá que hacer es una tabla con una fila que contenga todas las columnas o campos de la imagen, cada uno con su input.

La última columna o td, lo guardaremos para el botón eliminar.

Finalmente tendremos los botones de agregar fila o añadir fila y el de enviar la oferta, obviando el css tendremos algo como lo siguiente:

Al botón de eliminar le daremos la clase “.eliminarlinea” y al botón de añadir le daremos el id “#nuevalinea”

2- Preparamos el jquery para añadir las filas

3- Preparamos el jquery para eliminar las filas sobrantes – código definitivo jquery

 

Explicación del código  para añadir y  eliminar filas de una tabla en jquery

Queremos que al hacer click sobre el botón de añadir fila, en nuestro caso el id (#nuevalinea) se copie la fila justo debajo de la linea actual. Para ello utilizaremos el evento click en primer lugar:

$(“#nuevalinea”).click(function(){}

Dentro de esta función lo que haremos será crear una variable donde guardaremos nuestra fila actual, la que todavía no hemos copiado. Para encontrar la fila utilizaremos el evento find:

var clonarfila= $(“#tablaresponsive”).find(“tbody tr:last”).clone();

En esta línea lo que hemos hecho ha sido buscar la tabla con el id #tableresponsive, y dentro de esta tabla, buscar la ultima fila o tr que encontremos dentro del tbody. Finalmente copia o clona el contenido de esta tabla.

Finalmente una vez capturada la fila y guardada en nuestra variable clonarfila, vamos a añadirla debajo para lo cual utilizaremos:

$(“table tbody”).append(clonarfila);

Identifica el elemento tbody que está dentro de table y añade (append) lo guardado en la variable clonarfila.

Hasta aquí hemos explicado el código para añadir filas, vamos a ver ahora qué es lo que hemos hecho para eliminar filas.

$(“#tablaresponsive”).on(‘click’, ‘.eliminalinea’, function () {

Empezamos por identificar nuevamente la tabla con el id #tableresponsive, capturamos el evento click sobre el botón que tiene la clase .eliminalinea (cuando hacemos click en el botón .eliminarlinea…)

Como no queremos quedarnos sin filas al darle a eliminar, vamos a pedire a esta sencilla aplicación que detecte el número de filas actual y que no nos deje eliminar cuando el número de líneas sea menor de 2.

var numeroFilas = $(“#tablaresponsive tr”).length;

Guardamos en la variable numeroFilas, el número de filas que reconoce actualmente, para lo cual utilizamos .length

if(numeroFilas>2){ $(this).closest(‘tr’).remove(); }

Para concluir le decimos que si el número de filas que hemos detectado y guardado en la variable numeroFilas, es mayor a 2, coge este <tr> o fila más cercano y elimínalo.

Aplicaciones prácticas de añadir y eliminar filas de una tabla

En nuestro caso la aplicación ha sido para añadir lineas a la oferta, pero puede haber otras muchas aplicaciones:

  • Añadir usuarios a una aplicación o base de datos.
  • Añadir horarios para determinadas clases.
  • Insertar y añadir datos de clientes o artículos a una base de datos.

tabla jquery

Si te sirve de ayuda, no dudes en compartir!Share on LinkedInShare on FacebookTweet about this on TwitterPin on PinterestShare on Google+

Deja un comentario