<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../操作表格/js/jquery-1.8.3.min.js"></script>
</head>
<body>
<input type="button" value="全选" class="quan">
<button>新增</button><button>删除所选</button>
<table>
<tr>
<th>姓名</th>
<th>性别</th>
<th>卡号</th>
<th>会员级别</th>
<th>电话号码</th>
<th>出生年月</th>
<th>消费金额</th>
<th></th>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>张三1</td>
<td>男</td>
<td>123456</td>
<td>短工</td>
<td>15139238894</td>
<td>2003-10-7</td>
<td>10,000.00</td>
<td><img src="image/add.jpg" alt=""><img src="image/del.jpg" alt=""></td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>张三2</td>
<td>男</td>
<td>123456</td>
<td>短工</td>
<td>15139238894</td>
<td>2003-10-7</td>
<td>10,000.00</td>
<td><img src="image/add.jpg" alt=""><img src="image/del.jpg" alt=""></td>
</tr>
<tr>
<td><input class="q" type="checkbox"></td>
<td>张三3</td>
<td>男</td>
<td>123456</td>
<td>短工</td>
<td>15139238894</td>
<td>2003-10-7</td>
<td>10,000.00</td>
<td><img src="image/add.jpg" alt=""><img src="image/del.jpg" alt=""></td>
</tr>
</table>
<script>
$(function () {
var index=0;
$("button:eq(0)").click(function () {
// var cl = $("tr:last").clone(true);
// $("table").append(cl);
var $1 = $("<tr>\n" +
" <td><input class=\"q\" type=\"checkbox\"></td>\n" +
" <td>张三"+(index++)+"</td>\n" +
" <td>男</td>\n" +
" <td>123456</td>\n" +
" <td>短工</td>\n" +
" <td>15139238894</td>\n" +
" <td>2003-10-7</td>\n" +
" <td>10,000.00</td>\n" +
" <td><img src=\"image/add.jpg\" alt=\"\"><img src=\"image/del.jpg\" alt=\"\"></td>\n" +
" </tr>");
$("table").append($1);
$("img:odd").click(function () {
var b = confirm("确定删除？");
if (b)$(this).closest("tr").remove();
})
})
$("img:odd").click(function () {
var b = confirm("确定删除？");
if (b)$(this).closest("tr").remove();
})
$(".quan").click(function () {
// $("table td :checkbox").prop("checked",true)
if ($(this).val()==="全选"){
$(this).val("不全选");
$("input:checkbox").prop("checked",true);
}else {
$(this).val("全选");
$("input:checkbox").prop("checked",false);
}
})
$("button:last").click(function () {
// $("input:checked").each(function () {
// var n = $(this).parents("tr").index();
// $("table tr").eq(n).remove();
// })
if ($("input:checked").length===0){
alert("没选中")
}else {
var b = confirm("确定删除？");
if (b)$("input:checked").closest("tr").remove();
}
})
})
</script>
</body>
</html>效果图；
