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

Imágen de perfil
Val: 420
Oro
Ha mantenido su posición en JQuery (en relación al último mes)
Gráfica de JQuery

Añadir y eliminar filas de una tabla con jquerygráfica de visualizaciones


JQuery

estrellaestrellaestrellaestrellaestrella(13)
Actualizado el 24 de Mayo del 2018 por Xavi (Publicado el 22 de Enero del 2013)
119.559 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
estrellaestrellaestrellaestrellaestrella(13)

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
119.561 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 (13)

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
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
Es necesario revisar y aceptar las políticas de privacidad

http://lwp-l.com/s2279