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

http://lwp-l.com/s5601