Как добавить динамический элемент jquery?

-4

У меня есть этот html-код

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Agenda</title>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="css/agenda.css" rel="stylesheet">
<script type="text/javascript" src="js/jquery-3.0.0.min.js"></script>
<script type="text/javascript" src=js/agenda.js></script>
</head>
<body>

<div class="container">
<div class="row">

<div class="col-xs-12 col-md-3 ">
<input type="text" id="txtNombre" placeholder="Usuario" required="" autofocus="" class="form-control" >
</div>
<div class="col-xs-12 col-md-3 ">
<input type="text" id="txtTelefono" placeholder="Telefono" required="" autofocus="" class="form-control" >
</div>
<div class="col-xs-12 col-md-3 ">
<input type="text" id="txtDireccion" placeholder="Direccion" required="" autofocus="" class="form-control" >
</div>
<div class="col-xs-12 col-md-3 ">
<input type="text" id="txtEmail" placeholder="Correo" required="" autofocus="" class="form-control" >
</div>
</div>
<div class="row">
<div class="col-xs-12 col-md-3 col-md-offset-9 ">
<img src="img/mas.png" class="agregar" id="btnAgregar" autofocus="" >
</div>
</div>

</div>

</body>
</html>

enter image description here

Когда пользователь нажимает "добавить", он должен добавить новую строку с той же датой на входах, но добавить к каждой строке кнопку для, отредактировать текущую строку и удалить ее. поэтому вы можете добавить элемент N и удалить Row by Row (или отредактировать его один за другим).

Я работаю с jquery

спросил(а) 2016-06-17T06:24:00+03:00 4 года, 4 месяца назад
0
58

Привет, пожалуйста, проверьте эту ссылку.

https://plnkr.co/edit/B2Nmf5wzKBqHypnLFc59

HTML

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" />
<script data-require="jquery" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="script.js"></script>
</head>

<body>
<div class="container">
<div class="row main" id="main">

<div class="col-xs-12 col-md-3 ">
<input type="text" id="txtNombre" placeholder="Usuario" required="" autofocus="" class="form-control" >
</div>
<div class="col-xs-12 col-md-3 ">
<input type="text" id="txtTelefono" placeholder="Telefono" required="" autofocus="" class="form-control" >
</div>
<div class="col-xs-12 col-md-3 ">
<input type="text" id="txtDireccion" placeholder="Direccion" required="" autofocus="" class="form-control" >
</div>
<div class="col-xs-12 col-md-3 ">
<input type="text" id="txtEmail" placeholder="Correo" required="" autofocus="" class="form-control" >
</div>
</div>
<div class="row buttonbox">
<div class="col-xs-12 col-md-3 col-md-offset-9 ">
<button type="button" class="btn btn-success add" >ADD +</button>
<button type="button" class="btn btn-danger remove" >DEL -</button>
</div>
</div>

</div>
</body>

</html>

и JS

// Add your javascript here
$(function(){
var i = 0;
var last12 = $('.buttonbox').last();
$(document).on('click', '.add', function() {

var clone = $('#main').clone();
clone.find("input").val("");
clone.attr("id", "main" + i++).insertBefore(last12);

//clone.id = "main" + i;

});

$(".remove").click(function(){

$('.main:last').remove();
});
});

вы можете клонировать вышеуказанный div и снова добавлять

ответил(а) 2016-06-17T06:46:00+03:00 4 года, 4 месяца назад
41

Обновите свой HTML, добавив 2 кнопки добавления и вычитания строк,

HTML

<div class="row">
<!--For adding row-->
<div class="col-xs-12 col-md-3 col-md-offset-9 ">
<img src="#" class="agregar" id="btnadd" autofocus="" >
</div>
<!-- for removing rows-->
<div class="col-xs-12 col-md-3 col-md-offset-9 ">
<img src="#" class="agregar" id="btnrmv" autofocus="" >
</div>

Обновленный JS,

$(document).ready(function(){
$("#btnadd").click(function(){
$(".container > .row:first").clone().insertBefore('.row:last');
});
$("#btnrmv").click(function(){
$(".row:first").remove();
});
});

Таким образом, каждый раз, когда пользователь нажимает #btnadd, он добавляет один, а onclick #btnrmv удаляет его.

ответил(а) 2016-06-17T07:03:00+03:00 4 года, 4 месяца назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема