<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>名单</title>
<script src="../js/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
#table2{
width: 800px;
border-collapse: collapse;
text-align: center;
}
</style>
<script type="text/javascript">
function add(){//添加一行
var name=$("#name").val();
var age=$("#age").val();
var address=$("#address").val();
//创建一行
$("#table2").append($("<tr><td><input type='checkbox' class='checkbox'/></td><td>"+name+"</td><td>"+age+"</td><td>"+address+"</td><td><a href='javascript:void(0)' onclick='del(this)'>删除</a></td></tr>"));
}
function del(obj){//删除一行
$(obj).parent().parent().remove();
}
var clicktime=1;
function checkAll(){//全选
var tr=$("#checkbox11");
if(clicktime%2){
for(var i=0;i<($("#table2 tr").length-1);i++){
$("#table2 .checkbox")[i].checked=true;
}
}
else{
for(var i=0;i<($("#table2 tr").length-1);i++){
$("#table2 .checkbox")[i].checked=false;
}
}
clicktime++;
}
function delAll(){//批量删除
$("#table2 .checkbox:checked").parent().parent().remove();
}
</script>
</head>
<body>
<table>
<tr>
<td>姓名<input type="text" id="name" /></td>
<td>年龄<input type="text" id="age" /></td>
<td>住址<input type="text" id="address" /></td>
<td><input type="button" name="add" id="add" value="添加" onclick="add()" /></td>
<td><input type="button" name="add" id="add" value="批量删除" onclick="delAll()" /></td>
</tr>
</table>
<table id="table2" border="1">
<tr>
<th><input type="checkbox" name="" id="checkbox11" value="全选" onclick="checkAll()"/></th>
<th>姓名</th>
<th>年龄</th>
<th>住址</th>
<th>操作</th>
</tr>
<tr>
<th><input type="checkbox" class="checkbox"/></th>
<td>张三</td>
<td>13</td>
<td>上海</td>
<td><a href="javascript:void(0)" onclick="del(this)">删除</a></td>
</tr>
</table>
</body>
</html>
jq表格的增加与删除
猜你喜欢
转载自blog.csdn.net/Q_004/article/details/78436016
今日推荐
周排行