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:
- Cómo exporte datos de tablas HTML a Excel, CSV, PNG y PDF con jQuery
- Diseño de menú a pantalla completa con CSS
- Cómo validar que las contraseña que capturan tus usuarios son seguras con jQuery
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:
Cargando...
Artículos recientes
-
-
¿Cuál es la estructura Básica de un documento html5?
06 febrero 2015 -
El elemento DOCTYPE de html5
26 enero 2015 -
.jpg)
Cómo dar formato a texto en HTML
12 abril 2019 -
Aprende HTML5 en 16 lecciones (Introducción)
11 marzo 2020
