<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script src="jquery1.8.3.min.js"></script>
<style>
table{border-collapse:collapse;width:100%;height:50px;font-size:14px;}
table td{border:1px solid #000;}
.red{background:#669933;}
.green{background:#996666;}
.selectC{background:#99CCCC;}
</style>
</HEAD>
<BODY>
<input type="button" value="添加一行" id="addTr"/>
<input type="button" value="删除选中" id="delTrS"/>
<table>
<thead>
<tr>
<td>全选<input type="checkbox" name="quanxuan" id="checkAll"/>
</td><td>商品名称</td><td>商品单价</td><td>商品数量</td><td>商品金额</td><td>操作</td>
</tr>
</thead>
<tbody id="tbody">
<tr>
<td><input type="checkbox" class="ck"/></td>
<td><input type="text" class="productName"/></td>
<td><input type="text" class="price"/></td>
<td>
<input type="button" value="+" class="addnum">
<input type="text" class="productSum"/>
<input type="button" value="-" class="addnum">
</td>
<td><span class="countMoney"></span></td>
<td id="delBtn">删除</td>
</tr>
</tbody>
</table>
<h1>合计：</h1><span id="hj"></span>
</BODY>
<script>
//商品数量
$(".addnum").click(function(){
var tr=$(this).parent().parent();
var value=$(this).val();
var num=0;
if(value=="+"){
num=Number(tr.find(".productSum").val())+1;
tr.find(".productSum").val(num);
}
if(value=="-"){
num=Number(tr.find(".productSum").val())-1;
tr.find(".productSum").val(num);
}
tr.find(".productSum").trigger("blur");
});
//改变颜色
function chColor(){
$("#tbody tr").removeClass('green').removeClass('red');
$("#tbody tr:even").addClass("green");
$("#tbody tr:odd").addClass("red");
}
chColor();
//选择变色
$("#tbody").on("click",".ck",function(){
if($(this).prop("checked")){
$(this).parent().parent().addClass("selectC");
}else{
$(this).parent().parent().removeClass("selectC");
}
});
//添加一行
$('#addTr').click(function(){
var html='<tr>';
html=html+'<td><input type="checkbox" class="ck"/></td>';
html=html+'<td><input type="text" class="productName"/></td>';
html=html+' <td><input type="text" class="price"/></td>';
html=html+'<td>';
html=html+'<input type="button" value="+" class="addnum">';
html=html+'<input type="text" class="productSum"/>';
html=html+'<input type="button" value="-" class="addnum">';
html=html+'</td>';
html=html+'<td><span class="countMoney"></span></td>';
html=html+'<td id="delBtn">删除</td>';
html=html+' </tr>';
$('#tbody').append(html);
//$(".productSum").trigger("blur");
chColor();
});
//删除一行
$('#tbody').on('click','#delBtn',function(){
var tr=$(this).parent();
tr.remove();
$('#hj').trigger('blur');
});
//全选
$('#checkAll').click(function(){
var checked=$(this).attr('checked');
if(checked=='checked'){
$('.ck').attr('checked','checked');
$(".ck").parent().parent().addClass("selectC");
}else{
$('.ck').removeAttr('checked');
$(".ck").parent().parent().removeClass("selectC");
}
chColor();
$('#hj').trigger('blur');
});
//删除选中
$('#delTrS').click(function(){
$('.ck:checked').each(function(){
$(this).parent().parent().remove();
});
$('#hj').trigger('blur');
});
//商品金额
$('#tbody').on('blur','.price,.productSum',function(){
var tr=$(this).parent().parent();
var price=tr.find(".price").val();
var productSum=tr.find(".productSum").val();
var countMoney=Number(price)*Number(productSum);
tr.find(".countMoney").html(countMoney);
hj()
});
//合计
$('#tbody').on('click','.ck',function(){
hj();
});
function hj(){
var pri=0;
$("#tbody .ck:checked").each(function(){
var tr=$(this).parent().parent();
pri=pri+parseInt(tr.find(".countMoney").html());
//$('#hj').trigger('click');
});
$('#hj').html(pri);
}
</script>
</HTML>