動的要素jqueryを追加するには？

-1

私はこのhtmlコードを持っているユーザーを押して「追加」それは、入力中に同じ日付でを新しい行を追加しますが、編集のためにすべての行にボタンを追加する必要があります動的要素jqueryを追加するには？

<!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>

現在の行を削除して削除します。 Nエレメントを追加してRowでRowを削除（または1つずつ編集）することができます。

私はあなたが上記のdivのクローンを作成して追加することができますjqueryの

出典

2016-06-17 angel

こんにちは、このリンクをチェックしてください

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(); 
    }); 
});

で働いています再び

出典

2016-06-17 03:46:21

が

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(); 
}); 
});

、2ボタンの追加と行を引く追加することで、HTMLを更新このように、すべてのタイム時にユーザーがクリック#btnaddを1つ追加し、onclick #btnrmvは1つを削除します。

出典

2016-06-17 04:03:01 frnt

動的要素jqueryを追加するには？

答えて

関連する問題