Cómo agregar, editar y eliminar campos html dinámicamente usando JQuery

Estrada Web Group
Administrador
Cómo agregar, editar y eliminar campos html dinámicamente usando JQuery

En este post veremos cómo agregar y eliminar campos dinámicamente jquery, normalmente en un proyecto damos opciones a los usuarios para agregar varias filas y enviarlas a la base de datos, aquí estoy creando una funcionalidad para agregar y eliminar una fila estática. No mostrare código de servidor para almacenar datos en la base de datos, solo te estoy ayudando a agregar una fila dinámica en el contenedor HTML.

Artículos de interés:

En seguida puedes copiar el ejemplo completo para que hagas pruebas en tu equipo

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title> Dynamic Add Controls HTML</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
    <script type="text/javascript" charset="utf8" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script>
</head>
<body>

    <div class="container" style="min-height:650px;">
        <div style='margin-bottom:100px'>
            <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
            <!-- responsive-header -->
            <ins class="adsbygoogle"
                 style="display:block"
                 data-ad-client="ca-pub-5044208028083716"
                 data-ad-slot="8330817881"
                 data-ad-format="auto"></ins>
            <script>
                (adsbygoogle = window.adsbygoogle || []).push({});
            </script>

        </div><div class="col-sm-8"><h1>Source code: Dynamic Add Row</h1></div>

        <div class="col-sm-8" id="container2">
            <div id="type_container">
                <div class="row form-group" id="edit-0">
                    <div class="col-md-2 control-label">
                        <label for="username" class="control-label">
                            Brand :
                        </label>
                    </div>
                    <div class="col-md-3">
                        <select data-placeholder="Choose an Type..." class="form-control" name="">
                            <option disabled="disabled" selected="selected" value="0">Select</option>
                            <optgroup label="Swedish Cars">
                                <option value="volvo">Volvo</option>
                                <option value="saab">Saab</option>
                            </optgroup>
                            <optgroup label="German Cars">
                                <option value="mercedes">Mercedes</option>
                                <option value="audi">Audi</option>
                            </optgroup>
                        </select>
                    </div>
                    <div class="col-md-2 control-label">
                        <label for="username" class="control-label">
                            Point :
                        </label>
                    </div>
                    <div class="col-md-5 clearfix">
                        <div class="row col-md-3">
                            <input type="text" maxlength='5' class="form-control input-sm" name="" value="0" />
                        </div>

                        <div class="col-md-3 control-label">

                            <a class="add-type pull-right" href="javascript: void(0)" tiitle="Click to add more"><i class="glyphicon glyphicon-plus-sign"></i></a>

                        </div>
                    </div>
                </div>
            </div>


            <div id="type-container" class="hide">
                <div class="row form-group type-row" id="">
                    <div class="col-md-2 control-label">
                        <label for="username" class="control-label">
                            Brand :
                        </label>
                    </div>
                    <div class="col-md-3">
                        <select data-placeholder="Choose an Type..." class="form-control" name="">
                            <option disabled="disabled" selected="selected" value="0">Select</option>
                            <optgroup label="Swedish Cars">
                                <option value="volvo">Volvo</option>
                                <option value="saab">Saab</option>
                            </optgroup>
                            <optgroup label="German Cars">
                                <option value="mercedes">Mercedes</option>
                                <option value="audi">Audi</option>
                            </optgroup>
                        </select>
                    </div>
                    <div class="col-md-2 control-label">
                        <label for="username" class="control-label">
                            Point :
                        </label>
                    </div>
                    <div class="col-md-5 clearfix">
                        <div class="row col-md-3">
                            <input type="text" maxlength='5' class="form-control input-sm" name="" value="0" />
                        </div>
                        <div class="col-md-3 control-label"><a class="remove-type pull-right" targetDiv="" data-id="0" href="javascript: void(0)"><i class="glyphicon glyphicon-trash"></i></a></div>
                    </div>
                </div>
            </div>
        </div>
        <script>
            jQuery(document).ready(function () {
                var doc = $(document);
                jQuery('a.add-type').die('click').live('click', function (e) {
                    e.preventDefault();
                    var content = jQuery('#type-container .type-row'),
                        element = null;
                    for (var i = 0; i < 1; i++) {
                        element = content.clone();
                        var type_div = 'teams_' + jQuery.now();
                        element.attr('id', type_div);
                        element.find('.remove-type').attr('targetDiv', type_div);
                        element.appendTo('#type_container');

                    }
                });

                jQuery(".remove-type").die('click').live('click', function (e) {
                    var didConfirm = confirm("Are you sure You want to delete");
                    if (didConfirm == true) {
                        var id = jQuery(this).attr('data-id');
                        var targetDiv = jQuery(this).attr('targetDiv');
                        //if (id == 0) {
                        //var trID = jQuery(this).parents("tr").attr('id');
                        jQuery('#' + targetDiv).remove();
                        // }
                        return true;
                    } else {
                        return false;
                    }
                });

            });
        </script>
    </div>
</body>
</html>

 

Compartir artículo:

Más artículos geniales

Aprende HTML5 en 16 lecciones (Introducción)

Aprende HTML5 en 16 lecciones (Introducción)

¿qué es HTML5? Este post está dedicado a todos aquellos que quieren aprender HTML5, hoy iniciare una serie de 16 post donde explicare ¿qué es HTML5?, explicare como usarlo, las etiquetas, propiedades y más.

Ver artículo completo

Manténgase actualizado

Obtenga excelente contenido en su bandeja de entrada todas las semanas.
Solo contenido excelente, no compartimos su correo electrónico con terceros.
Subir al inicio de la pantalla ;