<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/jquery1.11.3.min.js"></script>
<script>
function add() {
//获得填入的值
var realName = $("#realName").val();
var age = $("#age").val();
var address = $("#address").val();
//创建一行
var trObj = $("<tr><td><input type="checkbox"></td><td>" + realName + "</td><td>" + age + "</td><td>" + address + "</td><td><a href="javascript:void(0)" οnclick="del(this)">删除</a></td></tr>")
//获得tbody
$("#mytb").append(trObj);
}
//删除一行
function del(obj) {
$(obj).parent().parent().remove();
}
// 先 全选， 再删除
function checkAll(obj) {
var states = $(obj).prop("checked");
if(states == true) {
$("tbody input").prop("checked", true);
} else {
$("tbody input").prop("checked", false);
}
}
// 删除
function delBatch() {
$("tbody input:checked").parent().parent().remove();
}
</script>
</head>
<body>
<table>
<tr>
<td>姓名：<input id="realName" name="realName" type="text"></td>
<td>年龄：<input id="age" name="age" type="text"></td>
<td>地址：<input id="address" name="address" type="text"></td>
<td><input value="添加" type="button" onclick="add()">
<input value="批量删除" type="button" onclick="delBatch()">
</td>
</tr>
</table>
<table border="1">
<thead>
<tr>
<td><input id="checkall" type="checkbox" onchange="checkAll(this)"></td>
<td>姓名</td>
<td>年龄</td>
<td>地址</td>
<td>操作</td>
</tr>
</thead>
<tbody id="mytb">
<tr>
<td><input type="checkbox"></td>
<td>小张</td>
<td>30</td>
<td>郑州</td>
<td>
<a href="javascript:void(0)" onclick="del(this)">删除</a>
</td>
</tr>
</tbody>
</table>
</body>
</html>
