html页面动态添加控件

<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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值