Código de JQuery - Añadir y eliminar filas de una tabla con jquery

Pos: 2

Val: 293

Ha mantenido su posición en JQuery (en relación al último mes)

Añadir y eliminar filas de una tabla con jquery

JQuery

(14)

Actualizado el 24 de Mayo del 2018 por Xavi (548 códigos) (Publicado el 22 de Enero del 2013)

148.879 visualizaciones desde el 22 de Enero del 2013

Código que muestra como añadir y eliminar filas de una tabla dada. Crea tantas columnas como la tabla tenga inicialmente.

anadir-fila-jquery

Versión 1
(14)

Actualizado el 24 de Mayo del 2018 (Publicado el 22 de Enero del 2013)

gráfica de visualizaciones de la versión: Versión 1

148.880 visualizaciones desde el 22 de Enero del 2013

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <script src="http://code.jquery.com/jquery-latest.js"></script>

    <script type="text/javascript">

    $(document).ready(function(){

/**

         * Funcion para añadir una nueva columna en la tabla

*/

        $("#add").click(function(){

            // Obtenemos el numero de filas (td) que tiene la primera columna

            // (tr) del id "tabla"

            var tds=$("#tabla tr:first td").length;

            // Obtenemos el total de columnas (tr) del id "tabla"

            var trs=$("#tabla tr").length;

            var nuevaFila="<tr>";

            for(var i=0;i<tds;i++){

                // añadimos las columnas

                nuevaFila+="<td>columna "+(i+1)+" Añadida con jquery</td>";

            // Añadimos una columna con el numero total de filas.

            // Añadimos uno al total, ya que cuando cargamos los valores para la

            // columna, todavia no esta añadida

            nuevaFila+="<td>"+(trs+1)+" filas";

            nuevaFila+="</tr>";

            $("#tabla").append(nuevaFila);

});

/**

         * Funcion para eliminar la ultima columna de la tabla.

         * Si unicamente queda una columna, esta no sera eliminada

*/

        $("#del").click(function(){

            // Obtenemos el total de columnas (tr) del id "tabla"

            var trs=$("#tabla tr").length;

            if(trs>1)

                // Eliminamos la ultima columna

                $("#tabla tr:last").remove();

});

});

    </script>

    <style>

    td, input {padding:5px;}

    </style>

</head>

<body>

<input type="button" id="add" value="añadir una nueva fila desde jquery">

<input type="button" id="del" value="eliminar la ultima fila desde jquery">

<p>

    <table id="tabla" border=1>

        <tr>

            <td>primera columma</td>

            <td>segundo columna</td>

            <!-- podemos añadir tantas columnas como deseemos -->

            <!--<td>tercera columna</td>-->

        </tr>

    </table>

</p>

</body>

</html>

Comentarios sobre la versión: Versión 1 (14)

Giiber

30 de Junio del 2014

Hola que tal, vi tu codigo. ME pregunto como harias para que agregara columnas y filas??? osea que agregue hacia abajo como para la derecha...

Responder

ererer

7 de Mayo del 2015

rerere

Responder

Sebastian

24 de Enero del 2016

Gracias Xavi

Pero como puedo guardar esa información en una base de datos.

Con un solo boton se me agrege todas laa filas que tenga en la tabla???

Gracias

Responder

sandra

19 de Mayo del 2018

Hola, yo también tengo esa duda. Estoy usando el framework synfony y no se como hacer para que la nueva fila creada sean los campos del formuario para guardar en la base datos.

Un saludo y gracias

Responder

Jorge

23 de Octubre del 2019

Encontré este que esta mas completo. Espero que les sirva

https://fernando-gaitan.com.ar/administrar-tabla-con-jquery/

Responder

MARTIN JOSE CARTAYA

8 de Julio del 2016

Exelente te felicito por el aporte

Responder

Jose MN

7 de Noviembre del 2016

Muy buen aporte, me sirvió de mucho, gracias!!!

Responder

Jose

25 de Abril del 2017

He modificado el código de esa forma, para que cuando se de clic en el botón agregue la otra fila, como hago para que el curso me quede en el nuevo campo agregado.

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
/**
* Funcion para añadir una nueva columna en la tabla
*/
$("#add").click(function(){
// Obtenemos el numero de filas (td) que tiene la primera columna
// (tr) del id "tabla"
var tds=$("#tabla tr:first td").length;
// Obtenemos el total de columnas (tr) del id "tabla"
var trs=$("#tabla tr").length;
var nuevaFila="<tr>";
for(var i=0;i<tds;i++){
// añadimos las columnas
nuevaFila+="<td><input name='pr_co.i' type='text' id='pr_co.i' value='$_POST['pr_co'.i])' size='1' /></td>";
}
// Añadimos una columna con el numero total de columnas.
// Añadimos uno al total, ya que cuando cargamos los valores para la
// columna, todavia no esta añadida
// nuevaFila+="<td>"+(trs+1)+" columnas";
nuevaFila+="</tr>";
$("#tabla").append(nuevaFila);
});

/**
* Funcion para eliminar la ultima columna de la tabla.
* Si unicamente queda una columna, esta no sera eliminada
*/
$("#del").click(function(){
// Obtenemos el total de columnas (tr) del id "tabla"
var trs=$("#tabla tr").length;
if(trs>1)
{
// Eliminamos la ultima columna
$("#tabla tr:last").remove();
}
});
});
</script>

<style>
#add, #del {cursor:pointer;text-decoration:underline;color:#00f;}
</style>
</head>

<body>
<input name="add" type="submit" id="add" value="Consultar" />
<div id="del">pulsa aquí para eliminar la ultima fila desde jquery</div>
<p>
<table id="tabla" border=1>
<tr>
<td>primera columma</td>
</tr>
</table>
</p>
</body>
</html>

Responder

Germán

30 de Septiembre del 2017

Muchas gracias por el aporte. Justo lo que necesitaba.

Responder

lcbarret

9 de Noviembre del 2017

hola que buen aporte, tomando parte de tu código y cacharriando le hice unas mejoras para que solo agregara las filas con sus respectivas columnas y quedo de la siguiente manera, la idea es que si alguien lo puede mejorar en el sentido de guardar los datos en una base de datos, me imagino que los datos se envían por $_POST en un arreglo y la parte de la inserción de los datos a la tabla no la se hacer, de ahí mi duda y si se puede concluir el ejercicio

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="../css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="../css/bootstrap-theme.css">
<link rel="stylesheet" type="text/css" href="../estilo.css">
<link rel="stylesheet" type="text/css" href="../font-awesome/css/font-awesome.css">
<script src="../js/jquery-1.11.3.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){

$("#add").click(function(){
// Obtenemos el numero de columnas (td) que tiene la primera fila
// (tr) del id "tabla"
var tds=$("#tabla tr:first td").length;
// Obtenemos el total de filas (tr) del id "tabla"
var trs=$("#tabla tr").length;
var nuevaFila="<tr>";
cant = $('#contador-filas').val();
cant++;
$('#contador-filas').val(cant)
nuevaFila+="<td><input class='form-control' type='text' name='cantidad["+(cant)+"]' placeholder='cantidad"+(cant)+"' required /> </td>"+
"<td><input class='form-control' type='text' name='articulo["+(cant)+"]' placeholder='articulo"+(cant)+"' required /> </td>"+
"<td><input class='form-control' type='text' name='precio["+(cant)+"]' placeholder='precio"+(cant)+"' required /> </td>";
// Añadimos una columna con el numero total de columnas.
// Añadimos uno al total, ya que cuando cargamos los valores para la
// columna, todavia no esta añadida
nuevaFila+="</tr>";
$("#tabla").append(nuevaFila);
});
/**
* Funcion para eliminar la ultima columna de la tabla.
* Si unicamente queda una columna, esta no sera eliminada
*/
$("#del").click(function(){
// Obtenemos el total de filas (tr) del id "tabla"
var trs=$("#tabla tr").length;
if(trs>2)
{
// Eliminamos la ultima fila
cant--;
$('#contador-filas').val(cant)
$("#tabla tr:last").remove();

}
});
});
</script>

<style>
#add, #del {text-decoration:none;color:#fff;}
</style>
</head>

<body>
<?php
if (!isset($_POST['datos']))
{

?>
<div class="container-fluid">
<div class="row">
<center>
<h2>Tabla Dinamica</h2>
<br /><br />
<button id="add" class="btn btn-sm btn-success">Agregar</button>
<button id="del" class="btn btn-sm btn-danger">Eliminar</button>
<br /><br />

<form action="" method="post">
<table class="table table-hover table-condensed" style="width: 40%" id="tabla">
<thead>
<tr class="info">
<td><b>campo 1</b></td>
<td><b>campo 2</b></td>
<td><b>campo 3</b></td>
</tr>
</thead>
<tbody>
<tr class="fila-0">
<input type="hidden" id="contador-filas" value="0" />
<td><input class="form-control" type="text" name="cantidad[0]" placeholder="cantidad" required /></td>
<td><input class="form-control" type="text" name="articulo[0]" placeholder="articulo" required /></td>
<td><input class="form-control" type="text" name="precio[0]" placeholder="precio" required /></td>
</tr>
</tbody>
</table>
<button type="submit" name="datos" class="btn btn-sm btn-primary" >Guardar </button>
<button type="reset" name="borrar" class="btn btn-sm btn-warning" >Limpiar </button>
</form>
</center>
<?php
}
else
{
$cantidad[]= $_POST['cantidad'];
$articulo[]= $_POST['articulo'];
$precio[]= $_POST['precio'];

}

?>

</div>
</div>

</body>
</html>

Responder

gabriel

12 de Enero del 2018

super bueno me sirvio mucho.gracias por compartir.

Responder

sandra

19 de Mayo del 2018

Estoy usando el framework synfony y no se como hacer para que la nueva fila creada sean los campos del formuario para guardar en la base datos.

Responder

Dennis Alexander

20 de Marzo del 2021

si lo que quieres es solo agregar campos a un formulario te comparto este link a mi me ha funcionado de maravilla espero te ayude

https://programacion.net/articulo/anadir_y_eliminar_campos_inputs_dinamicamente_mediante_jquery_1715

Responder

Hector

18 de Agosto del 2018

Acá hay una forma simple usando Jquery:

BODY TABLA:

<div class="contenedor-tablas">
<div class="titulo-contenedor"><p class="titulos-tablas">NÚMERO DE PROYECTOS</p></div>
<table id="tabla" class="tablas">
<tbody>
<tr>
<th>ID PROYECTO</th>
<th>NOMBRE IMAGEN</th>
<th>ACTIVO</th>
</tr>
<tr>
<td>1</td>
<td><input></input></td>
<td>
<select>
<option value="SI">SI</option>
<option value="NO">NO</option>
</select>
</td>
</tr>
</tbody>
</table>
<img id="del" title="eliminar fila" class="eliminar" src="img/delete.png"></img>
<img id="add" title="agregar fila" class="eliminar" src="img/add.png"></img>
</div>

SCRIPT JQUERY

<script>
//AGREGAR NUEVAS FILAS A "NÚMEROS DE PROYECTOS"
$("#add").click(function(){
var totalfilas= $("#tabla tr").length;
$("#tabla tr:last").after('<tr><td>'+totalfilas+'</td><td><input></input></td><td><select><option value="NO">NO</option><option value="SI">SI</option></select></td></tr>');
});
// ELIMINAR ÚLTIMA FILA A "NUMERO DE PROYECTOS"
$("#del").click(function(){
var totalfilas= $("#tabla tr").length;
if(totalfilas>2){
$("#tabla tr:last").remove();
}
});
</script>

Responder