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

Cómo obtener la latitud y longitud de un pin que se puede arrastrar a través de Google Maps

Cómo obtener la latitud y longitud de un pin que se puede arrastrar a través de Google Maps

El API de Google Maps ofrece una amplia gama de funcionalidades para interactuar con mapas. Se puede establecer estáticamente los marcadores (pines) mediante programación, pero también se puede permitir a los usuarios interactuar con el mapa arrastrando los marcadores existentes alrededor del mapa.

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 ;