Código de JQuery - Añadir y eliminar filas de un formulario

Imágen de perfil

Añadir y eliminar filas de un formulariográfica de visualizaciones


JQuery

Publicado el 23 de Octubre del 2019 por Administrador (676 códigos)
1.027 visualizaciones desde el 23 de Octubre del 2019
Este código muestra como añadir y eliminar filas en un formulario dentro de una tabla.

Administrar-tabla-jquery

20170719

Publicado el 23 de Octubre del 2019gráfica de visualizaciones de la versión: 20170719
1.028 visualizaciones desde el 23 de Octubre del 2019
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella


Forma parte de adm_table_jquery
 
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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
 
    <!-- Latest compiled and minified CSS -->
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
 
    <div class="container">
        <h1> Lista de productos </h1>
        <form action="" method="post">
            <table id="lista_productos" class="table table-striped">
                <thead>
                    <tr>
                        <th> Nombre </th>
                        <th> Descripción </th>
                        <th> Precio </th>
                        <th>  </th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>
                            <input type="text" name="nombre[]" class="nombre" placeholder="Nombre" />
                        </td>
                        <td>
                            <textarea name="descripcion[]" class="descripcion" placeholder="Descripción" width="100%"></textarea>
                        </td>
                        <td>
                            <input type="number" name="precio[]" class="precio" placeholder="Precio" />
                        </td>
                        <td>
                            <button type="button" class="btn btn-danger button_eliminar_producto"> Eliminar </button>
                        </td>
                    </tr>
                </tbody>
                <tfoot>
                    <tr>
                        <td colspan="3">  </td>
                        <td>
                            <button type="button" class="btn btn-success button_agregar_producto"> Agregar </button>
                        </td>
                    </tr>
                </tfoot>
            </table>
        </form>
    </div>
 
</body>
</html>
 
<script>
$(document).ready(function() {
    var tbody = $('#lista_productos tbody');
 
    // Al iniciar, obtenemos el contenido del formulario sin contenido.
    // Este sera el que se ira añadiendo al final del mismo
    var fila_contenido = tbody.find('tr').first().html();
 
    // Evento para añadir la nueva fila
    $('#lista_productos .button_agregar_producto').click(function() {
 
        // Creamos el nuevo <tr>
        var fila_nueva = $('<tr></tr>');
 
        // Añade en su interior la fila guardada al iniciar
        fila_nueva.append(fila_contenido);
 
        // añade la nueva fila al formulario
        tbody.append(fila_nueva);
    });
 
    // Evento para eliminar la fila
    $('#lista_productos').on('click', '.button_eliminar_producto', function(){
        $(this).parents('tr').eq(0).remove();
    });
});
</script>



Comentarios sobre la versión: 20170719 (0)


No hay comentarios
 

Comentar la versión: 20170719

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/s5601