2017-09-16 17 views
0

を使用して動的フィールドを作成する方法について説明します。あなたが理解していない場合は、コード私はこの問題は、私はjQueryのを使用して、動的に作成したボタンを使用して動的フィールドを作成したい</p> <p>助けてください直面していますという点で、私は1つのUIを作成してい動的に作成したボタン

のjQueryを使用して、とのトラブルを正確に何を持っている?

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<script> 
    $(document).ready(function(e){ 
     var html='<div><br>Alter Mobile No : <input type="text" name="mobile[]" id="mobile">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="button" name="close" value="X" id="cls"></div>'; 
     var htmlrow ='<br><div style="text-align: left;"><input type="button" name="remrow" id="remrow" value="X"><div class="row"><div>Full Name :<input type="text" name="fname[]" id="fname"></div><div class="col-md-3" id="addmob">Mobile No : <input type="text" name="mobile[]" id="mobile"> &nbsp;<input type="button" name="addB" id="add" value="+" ></div></div></div>'; 

     $("#add").click(function(){ 
      $("#addmob").append(html); 
     }); 

     $("#addmob").on('click','#cls',function(e){ 
      $(this).parent('div').remove(); 
     }); 

     $("#addrow").click(function(){ 
      $("#row123").append(htmlrow); 
     }); 

     $("#row123").on('click','#remrow',function(e){ 
      $(this).parent('div').remove(); 
     }); 
    }); 
</script> 

htmlファイル

<body> 
    <div> 
     <input type="button" name="addrow" id="addrow" value="Add"> 
    </div> 
    <br> 
    <div class="container" id="row123"> 
     <div class="col-md-3"> 
     Full Name :<input type="text" name="fname" id="lname"> 
     </div><br> 
     <div class="col-md-3" id="addmob"> 
      Mobile No : <input type="text" name="mobile[]" id="mobile"> &nbsp;<input type="button" name="add" id="add" value="+" > 
     </div> 
    </div> 
</body> 
+1

を提出確認してください – DavidDomain

+0

ボタンを使用してhtmlテキストボックスを作成したい(動的に作成されたボタン) –

+0

動的にボタンを追加するPHPスクリプトまたはJqueryを使用してボタンを動的に作成することができます –

答えて

0
$(document).ready(function(e){ 
       var html='<div><br>Alter Mobile No : <input type="text" name="mobile[]" id="mobile">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="button" name="close" value="X" id="cls"></div>'; 
       var htmlrow ='<div style="text-align: left; margin-top:15px;"><input type="button" name="remrow" id="remrow" value="X"><div class="row"><div>Full Name :<input type="text" name="fname[]" id="fname"></div><div class="col-md-3" id="addmob">Mobile No : <input type="text" name="mobile[]" id="mobile"> &nbsp;<input type="button" name="addB" id="add" value="+" ></div></div></div>'; 


       $("#row123").on('click', '#add', function(){ 
        $(this).closest("#addmob").append(html); 
       }); 


       $("#row123").on('click','#cls',function(e){ 

       $(this).parent('div').remove(); 
        }); 

       $("#addrow").click(function(){ 


        $("#row123").append(htmlrow); 

       }); 

       $("#row123").on('click','#remrow',function(e){ 

       $(this).parent('div').remove(); 
       }); 

      }); 
+0

素晴らしい!非常に働いてくれてありがとう –

関連する問題