<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function(){
//添加
$(".q").click(function(){
var $new1 = $("#xingming").val();
var $new2 = $("#xingbie").val();
var $new3 = $("#kahao").val();
var $new4 = $("#huiyuan").val();
var $new5 = $("#dianhua").val();
var $new6 = $("#chusheng").val();
var $new7 = $("#xiaofei").val();
var $tr = $("<tr><td><input type=‘checkbox‘ class=‘qq‘></td><td>"+$new1+"</td><td>"+$new2+"</td><td>"+$new3+"</td><td>"+$new4+"</td><td>"+$new5+"</td><td>"+$new6+"</td><td>"+$new7+"</td><td><input type=‘button‘ style=‘background-image: url(img/add.jpg); width: 30px; height: 30px;‘></td><td><input type=‘button‘ class=‘o‘ style=‘background-image: url(img/del.jpg); width: 30px; height: 30px;‘ /></td></tr>")
$("table[class=‘dd‘]").append($tr);
//添加之后清空
$("#xingming").val("");
$("#xingbie").val("");
$("#kahao").val("");
$("#huiyuan").val("");
$("#dianhua").val("");
$("#chusheng").val("");
$("#xiaofei").val("");
})
//删除行
$(".o").live("click",function(){
$(this).parent().parent().remove();
})
//checkbox 全选
$("#che").click(function(){
if(this.checked){
$(".qq").prop("checked",true);
}else{
$(".qq").prop("checked",false);
}
})
//函数allchk()就是用来检测全选框.qq应该是选中状态还是未选中状态的
function allchk(){
var chknum = $(".qq").size(); //选项总个数
var chk = 0;
$(".qq").each(function(){
if($(this).prop("checked")==true){
chk++;
}
});
if(chknum==chk){//全选
$("#che").prop("checked",true);
}else{//不全选
$("#che").prop("checked",false);
}
}
//当checkbox全部选中时，全选按钮自动选中
$(".qq").click(function(){
allchk();
})
})
</script>
<body>
<table class="dd" border="1px solid " cellpadding="0" cellspacing="0">
<tr>
<td><input type="checkbox" id="che"></td>
<td>姓 名</td>
<td>性 别</td>
<td>卡号</td>
<td>会员级别</td>
<td>电话号码</td>
<td>出生年月</td>
<td>消费金额</td>
</tr>
<tr>
<td><input type="checkbox" class="qq"></td>
<td>张三</td>
<td>男</td>
<td>1554154554</td>
<td>短工</td>
<td>15723657894</td>
<td>1999-4-25</td>
<td>10,000.00</td>
<td><input type="button" style="background-image: url(img/add.jpg); width: 30px; height: 30px;"></td>
<td><input type="button" class="o" style="background-image: url(img/del.jpg); width: 30px; height: 30px;" /></td>
</tr>
<tr>
<td><input type="checkbox" class="qq"></td>
<td>张三</td>
<td>男</td>
<td>1554154554</td>
<td>短工</td>
<td>15723657894</td>
<td>1999-4-25</td>
<td>10,000.00</td>
<td><input type="button" style="background-image: url(img/add.jpg); width: 30px; height: 30px;"></td>
<td><input type="button" class="o" style="background-image: url(img/del.jpg); width: 30px; height: 30px;" /></td>
</tr>
<tr>
<td><input type="checkbox" class="qq"></td>
<td>张三</td>
<td>男</td>
<td>1554154554</td>
<td>短工</td>
<td>15723657894</td>
<td>1999-4-25</td>
<td>10,000.00</td>
<td><input type="button" style="background-image: url(img/add.jpg); width: 30px; height: 30px;"></td>
<td><input type="button" class="o" style="background-image: url(img/del.jpg); width: 30px; height: 30px;" /></td>
</tr>
</table>
<input type="button" id="shan" value="删除所选" />
<table border="1px" cellspacing="0">
<tr>
<td>姓名<input type="text" id="xingming"></td></tr>
<tr><td>性别<input type="text" id="xingbie"></td></tr>
<tr><td>卡号<input type="text" id="kahao"></td></tr>
<tr><td>会员级别<input type="text" id="huiyuan"></td></tr>
<tr><td>电话号码<input type="text" id="dianhua"></td></tr>
<tr><td>出生年月<input type="text" id="chusheng"></td></tr>
<tr><td>消费金额<input type="text" id="xiaofei"></td></tr>
<tr><td><input type="button" class="q" value="确定添加"</td></tr>
</table>
</body>
</html>
Jquery 实现添加删除，checkbok 的全选，反全选，但是批量删除没有实现
原文：https://www.cnblogs.com/qituanjie/p/11322469.html