html和JS
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>淘宝购物车页面</title>
<link href="css/myCart.css" type="text/css" rel="stylesheet" />
<script type="text/javascript">
function selectAll(){
var all=document.getElementById("allCheckBox");
var check=document.getElementsByName("cartCheckBox");
if(all.checked){
for(var i= 0,len=check.length;i<len;i++){
check[i].checked=true;
}
}else{
for(var i= 0,len=check.length;i<len;i++){
check[i].checked=false;
}
}
}
function xiaoji(){
var total=0;
var sum=0;
var tal=document.getElementById("shopping");
var trs=tal.getElementsByTagName("tr");
var totals=document.getElementById("total");
var jifens=document.getElementById("integral");
for(var i=1,len=trs.length;i<len;i++){
var tds=trs[i].getElementsByTagName("td");
if(tds.length>=2){
var jifen=tds[3].innerHTML;
var price=tds[4].innerHTML;
var num=tds[5].getElementsByTagName("input")[0].value;
tds[6].innerHTML=price*num;
sum+=parseInt(jifen)*num;
total+=price*num;
totals.innerHTML=total;
jifens.innerHTML=sum;
}
}
}
function changeNum(numid,choose){
var ids=document.getElementById(numid);
if(choose=="minus"){
if(ids.value>0){
ids.value=parseInt(ids.value)-1;
xiaoji();
}else{
alert("数量不能为负数！！！");
xiaoji();
}
}
else if(choose=="add"){
ids.value=parseInt(ids.value)+1;
xiaoji();
}
}
function deleteRow(trid){
var tal=document.getElementById("shopping");
var trid=document.getElementById(trid);
tal.deleteRow(trid.rowIndex);
xiaoji();
}
function deleteSelectRow(){
var quanxu=document.getElementById("allCheckBox");
var inp=document.getElementsByName("cartCheckBox");
var tab=document.getElementById("shopping");
if(quanxu.checked){
for(var i=inp.length-1;i>=0;i--){
var tr0=inp[i].parentNode.parentNode;
tab.deleteRow(tr0.rowIndex-1);
tab.deleteRow(tr0.rowIndex);
}
}else{
for(var i=inp.length-1;i>=0;i--){
if(inp[i].checked){
var tr0=inp[i].parentNode.parentNode;
tab.deleteRow(tr0.rowIndex-1);
tab.deleteRow(tr0.rowIndex);
}
}
}
}
window.onload = xiaoji;;
</script>
</head>
<body>
<div id="content">
<table width="100%" border="0" cellspacing="0" cellpadding="0" id="shopping">
<form action="" method="post" name="myform">
<tr>
<td class="title_2" colspan="2">商品</td>
<td class="title_3">货到付款</td>
<td class="title_4">单价（元）</td>
<td class="title_5">数量</td>
<td class="title_5">已优惠</td>
<td class="title_6">小计（元）</td>
<td class="title_7">操作</td>
</tr>
<tr>
<td colspan="8" class="line"></td>
</tr>
<tr id="product1">
<td class="cart_td_2"><img src="images/2wl.jpg" alt="shopping"/></td>
<td class="cart_td_3" name="cartCheckBox" value="product1" onclick="selectSingle()"><a href="#">海尔冰箱BCD-539WT(惠民)</a><br />
<td class="cart_td_4">支持</td>
<td class="cart_td_5">￥3699</td>
<td class="cart_td_6"><img src="images/taobao_minus.jpg" alt="minus" onclick="changeNum('num_1','minus')" class="hand"/> <input id="num_1" type="text" value="1" class="num_input" readonly="readonly"/> <img src="images/taobao_adding.jpg" alt="add" onclick="changeNum('num_1','add')" class="hand"/></td>
<td class="cart_td_9">￥0</td>
<td class="cart_td_7">￥3699</td>
<td class="cart_td_8"><a href="javascript:deleteRow('product1');">删除</a></td>
</tr>
<tr id="product3">
<td class="cart_td_2"><img src="images/3wl.jpg" alt="shopping"/></td>
<td class="cart_td_3"><a href="#">海尔冰箱BCD-649WADV</a><br />
<td class="cart_td_4">支持</td>
<td class="cart_td_5">￥6999</td>
<td class="cart_td_6"><img src="images/taobao_minus.jpg" alt="minus" onclick="changeNum('num_3','minus')" class="hand"/> <input id="num_3" type="text" value="1" class="num_input" readonly="readonly"/> <img src="images/taobao_adding.jpg" alt="add" onclick="changeNum('num_3','add')" class="hand"/></td>
<td class="cart_td_9">￥0</td>
<td class="cart_td_7">￥6999</td>
<td class="cart_td_8"><a href="javascript:deleteRow('product3');">删除</a></td>
<tr>
<!--删除所选的图片-->
<td colspan="3">清空购物车</td>
<td colspan="5" class="shopend">商品总计：<span class="xm_dd">￥10698</span> + 运费：<span class="xm_dd">￥0</span> - 优惠活动：<span class="xm_dd">￥0</span> = 订单总计：<span class="xm_dd">￥10698</span><label id="total" class="yellow"></label><br />
</tr>
</form>
</table>
</div>
</body>
</html>