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

Versión 1
estrellaestrellaestrellaestrellaestrella(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
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<!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
estrellaestrellaestrellaestrellaestrella
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
estrellaestrellaestrellaestrellaestrella
rerere
Responder
24 de Enero del 2016
estrellaestrellaestrellaestrellaestrella
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
estrellaestrellaestrellaestrellaestrella
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
estrellaestrellaestrellaestrellaestrella
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
estrellaestrellaestrellaestrellaestrella
Exelente te felicito por el aporte
Responder
Jose MN
7 de Noviembre del 2016
estrellaestrellaestrellaestrellaestrella
Muy buen aporte, me sirvió de mucho, gracias!!!
Responder
Jose
25 de Abril del 2017
estrellaestrellaestrellaestrellaestrella
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
estrellaestrellaestrellaestrellaestrella
Muchas gracias por el aporte. Justo lo que necesitaba.
Responder
lcbarret
9 de Noviembre del 2017
estrellaestrellaestrellaestrellaestrella
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
estrellaestrellaestrellaestrellaestrella
super bueno me sirvio mucho.gracias por compartir.
Responder
sandra
19 de Mayo del 2018
estrellaestrellaestrellaestrellaestrella
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
estrellaestrellaestrellaestrellaestrella
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
estrellaestrellaestrellaestrellaestrella
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

Comentar la versión: Versión 1

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios...
CerrarCerrar
CerrarCerrar
Cerrar

Tienes que ser un usuario registrado para poder insertar imágenes, archivos y/o videos.

Puedes registrarte o validarte desde aquí.

Codigo
Negrita
Subrayado
Tachado
Cursiva
Insertar enlace
Imagen externa
Emoticon
Tabular
Centrar
Titulo
Linea
Disminuir
Aumentar
Vista preliminar
sonreir
dientes
lengua
guiño
enfadado
confundido
llorar
avergonzado
sorprendido
triste
sol
estrella
jarra
camara
taza de cafe
email
beso
bombilla
amor
mal
bien
Es necesario revisar y aceptar las políticas de privacidad

http://lwp-l.com/s2279