版权声明：原创内容是本人学习总结，仅限学习使用，禁止用于其他用途。如有错误和不足，欢迎评论指正补充。 https://blog.csdn.net/qian_qian_123/article/details/84309213
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#first{
font-weight: bold;
}
td{
text-align: center;
}
</style>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
$(".delete").live("click",function(){
$(this).parent().remove();
});
$(".sub").live("click",function(){
var $test=$(this).next().val();
if($test>1){
$(this).next().val(parseFloat($(this).next().val())-1 );
}
});
$(".add").live("click",function(){
$(this).prev().val(parseFloat($(this).prev().val())+1 );
});
$("#checkAll").click(function(){
var val=document.getElementById("checkAll").checked;
var ch=document.getElementsByName("check");
for(var i=0;i<ch.length;i++){
ch[i].checked=val;
}
});
$("#addNew").click(function(){
var s=$('<tr class="row"><td><input type="checkbox" name="check" /></td><td> 苹果手机iPhone5</td><td>¥<span>3999</span>元</td><td><input type="button" class="sub" value="-" /><input type="text" value="1" /><input type="button" class="add" value="+" /></td><td class="delete"><p>删除</p></td></tr>');
$("#tab").append(s);
});
$("#delOld").click(function(){
var ch=document.getElementsByName("check");
for(var i=0;i<ch.length;i++){
if(ch[i].checked){
$(ch[i]).parent().parent().remove();
}
}
})
})
</script>
</head>
<body>
<form action="" method="post">
<table border="1px gray solid" cellspacing="0px" id="tab">
<tr class="row" id="first">
<td ><input type="checkbox" id="checkAll"/>全选 </td>
<td>商品信息</td>
<td>宜美惠价</td>
<td>数量</td>
<td>操作</td>
</tr>
<tr class="row">
<td><input type="checkbox" name="check"/></td>
<td> 天堂直杆彩虹伞</td>
<td>¥<span>32.9</span>元</td>
<td>
<input type="button" class="sub" value="-" />
<input type="text" value="1" />
<input type="button" class="add" value="+" />
</td>
<td class="delete"><p>删除</p></td>
</tr>
<tr class="row">
<td><input type="checkbox" name="check" /></td>
<td> 苹果手机iPhone5</td>
<td>¥<span>3999</span>元</td>
<td>
<input type="button" class="sub" value="-" />
<input type="text" value="1" />
<input type="button" class="add" value="+" />
</td>
<td class="delete"><p>删除</p></td>
</tr>
</table><br />
<span id="addNew">增加</span>
<span id="delOld">删除</span>
</form>
</body>
</html>
