動態添加按鈕

時間 2019-11-13

標籤動態添加按鈕简体版

原文原文鏈接

 1 <html>
 2     <table>
 3     <tr><button style="margin-left:10px" class="add_field_button btn">Add</button></tr>    
 4     <tbody class="input_fields_wrap"></tbody>
 5     </table>
 6     <script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
 7     <script>   
 8        var max_fields      = 5; //maximum input boxes allowed  
 9         var wrapper          = $(".input_fields_wrap"); //Fields wrapper  
10         var add_button    =(".add_field_button"); //Add button ID  
11           
12         var x = 1; //initlal text box count  
13         $(add_button).click(function(e){ //on add input button click  
14             e.preventDefault();  
15             if(x < max_fields){ //max input box allowed  
16                 x++; //text box increment  
17                 $(wrapper).append('<tr style=""><td></td><td><button  class="remove_field btn">Del</button></td></tr>'); //add input box  
18                 }     
19         });   
20           
21         $(wrapper).on("click",".remove_field", function(e){ //user click on remove text  
22             e.preventDefault(); $(this).closest('tr').remove(); x--;  
23         })    
24     </script>
25 </html>

效果：javascript

相關標籤/搜索