html页面动态添加控件

xiaoxiao2021-02-28  87

<html> <head> <title>test</title> <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script> <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ var number = 1; $("#add_new_line").click(function(){ var addHtml = $('#divAdd').html() $("#fileTable").append(addHtml); number = number + 1; }); $("#delete_line").click(function() { if((fileTable.rows.length-1) > 0){ fileTable.deleteRow(fileTable.rows.length-1); number = number - 1; } }); }); </script> </head> <body> <script type="text/x-template" id="divAdd"> <tr> <td>  <div class="col-xs-12"> <input type="text" id="testFile" name="testFile" placeholder="//测试文件">  </div> </td> </tr> </script> <input type="button" value="Add" id="add_new_line"> <input type="button" value="delete" id="delete_line"> <div id="test_content"> <table id='fileTable'> <tr> <td>  <div class="col-xs-12"> <input type="text" id="testFile" name="testFile" placeholder="测试文件">  </div> </td> </tr> </table> </div> </body> </html>
转载请注明原文地址: https://www.6miu.com/read-85247.html

最新回复(0)