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>
原文地址：http://www.cnblogs.com/wanger1994/p/3763203.html
