js中点击按钮时自动增加一行
1、新建一个html文件,命名为test.html。
2、在test.html文件里,创建一个button按钮,并设置其id属性为dz,用于下面获得按钮对象,实现js点击按钮事件。
3、给button绑定点击事件,当按钮被点击时,执行hs()函数。
4、在test.html文件的js标签内,定义hs()函数,在函数内使用alert() 方法弹出"我被点击了"的内容。
5、在js内,使用window对象中的onload事件,当网页加载完时,执行function函数。
6、在function函数内,通过getElementById()方法获得按钮对象,使用click()方法点击按钮。
7、在浏览器打开test.html文件,当打开网页时,js自动执行点击事件。
直接上代码:
<input type="button" value="增加" id="addTable"/>
<input type="button" value="删除" id="deleteTable"/>
<table id="table1"></table>
$(document).ready(function(){
$("#addTable").click(function(){
var tr="<tr><td><input type=\"checkbox\" name=\"check\"/>"+
"</td><td>111</td><td>222</td><td>333</td></tr>";
$("#table1").append(tr);
});
$("#deleteTable").click(function(){
var check = document.getElementsByName("check");
for(var i=1;i<=check.length;i++){
if(check[i].checked){
document.getElementById('table1').deleteRow(i);
}
}
})
})
没测试,自己试试,不行再问
试了,没有反应
你导入jquery库了?给你改一下
<input type="button" value="增加" id="addTable"/>
<input type="button" value="删除" id="deleteTable"/>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>//记得导入这个库
<script>
$(document).ready(function(){
$("#addTable").click(function(){
var tr="<tr><td><input type=\"checkbox\" name=\"check\"/>"+
"</td><td>111</td><td>222</td><td>333</td></tr>";
$("#table1").append(tr);
});
$("#deleteTable").click(function(){
var check = document.getElementsByName("check");
for(var i=0;i<check.length;i++){
if(check[i].checked){
document.getElementById('table1').deleteRow(i);
i--;
}
}
})
})
</script>
亲测成功。给你个jquery库
动态添加,动态删除