<!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=utf-8" />
<title>天天购物车</title>
<style type="text/css">
.red{ color:#F00; font-size:18px;}
a{ text-decoration:none; font-size:24px;}
</style>
<script type="text/javascript">
/* 购物车 思路：创建 一个table 五行六列
1.可以全选，全不选 自定义函数：choseAll()
2.可以修改产品数量 自定义函数：sum()
3.可以删除商品 自定义函数： deleterow(obj)
4.可以新增商品 自定义函数： 新商品 tianjia() 复制一件商品（copy）： addrow(obj)
5.可以计算总金额 自定义函数： select()
6.可以显示商品总件数 自定义函数： select()
*/
function tianjia(){ //在最后一行添加新商品数据 一行 table[ 1个tr [ 含有6个td ] ]
var table=document.getElementById("myToby");
//第一种添加tr方法
var newRow=document.createElement("tr");
var td1=document.createElement("td");
td1.innerHTML='<input type="checkbox" name="shop" value="4" /> <img src="U盘c.jpg" width="100px" />' ;
var td2=document.createElement("td");
td2.innerHTML="360随身WiFi3 300M 无线网卡 迷你路由器 黑色 ";
var td3=document.createElement("td");
td3.innerHTML="￥69.00";
var td4=document.createElement("td");
td4.innerHTML=' <input type="text" name="price" value="1" style="width:100px;" onchange="sum()" />'; //易错地方 通过innerHTML写入代码 需要加 ''(单引号)
var td5=document.createElement("td");
td5.innerHTML='<span id="sum4" class="red">￥69.00</span>';
var td6=document.createElement("td");
td6.innerHTML='<a href="#" onclick="deleterow(this)">删除</a><br /><a href="#" onclick="addrow(this)">点击再加入购物车一套</a>';
newRow.appendChild(td1); //先把td添加到tr ，再把tr添加到table
newRow.appendChild(td2);
newRow.appendChild(td3);
newRow.appendChild(td4);
newRow.appendChild(td5);
newRow.appendChild(td6);
table.appendChild(newRow);
//第二种添加tr方法
/*table.innerHTML+='<tr><td align="center"><input type="checkbox" name="shop" value="1" /><img src="shu1.jpg" width="100px" /></td> <td valign="top"><a href="#"> 彩色连环画中国历史（第一辑，1-10册）</a></td><td valign="top" >¥<span id="one">199.00</span></td><td valign="top"><input type="text" name="price" value="4" style="width:100px;" onchange="sum()" /></td><td valign="top"><span id="sum4" class="red" >¥199.00</span></td><td valign="top"><a href="#" onclick="deleterow(this)">删除</a><br /><a href="#" onclick="addrow(this)">点击再加入购物车一套</a></td></tr>'*/
}
function deleterow(obj){ //obj
var flag=confirm("确定要删除吗？"); //提示是否要删除 flag=true/false ( true删除 false不删除)
if(flag==true){
var tr=obj.parentNode.parentNode; //obj.parentNode.parentNode是<tr> parentNode 上一个节点
var table=tr.parentNode;//tr.parentNode是<table>
table.removeChild(tr); // 产出一行
}else{}
}
function addrow(obj){
var tr=obj.parentNode.parentNode;//obj.parentNode.parentNode是<tr>
var table=tr.parentNode; //tr.parentNode是<table>
var oldRow=tr;
if(oldRow !=null){
var newRow=oldRow.cloneNode(true); //拷贝一行到另外一行
}
table.appendChild(newRow); //把克隆的一行添加到table
}
function choseAll(){ //全选 或全不选
var shops=document.getElementsByName("shop"); //获取name为shop的集合
var chose=document.getElementsByName("choose"); //获取□全选
var xz=chose.item(chose.length-1);
if(xz.checked==true){ //当命名为全选的复选框被点击 选择上的时候
for(var i=0; i<shops.length;i++){
var shop=shops.item(i);
shop.checked=true; //所有商品被全选
}
}
if(xz.checked==false){ //当全选的复选框未被点击选择的时候
for(var i=0; i<shops.length;i++){
var shop=shops.item(i);
shop.checked=false;
}
}
}
function sum(){ //当某行的数量发生变化时 ，触发此函数 导致此行金额随即发生改变
var num=document.getElementsByName("price"); //获取name为price的集合
var sum=document.getElementById("sum1"); //获取id为sum1的对象元素
var one=document.getElementById("one").innerHTML; //获取id为 one对象的内容 第一行商品单价
var sums1=one*num.item(0).value; //计算金额
sum.innerHTML="¥"+sums1; //修改第一行金额内容
var two=document.getElementById("two").innerHTML;//获取id为 two对象的内容 第二行商品单
var sum2=document.getElementById("sum2");
var sums2=two*num.item(1).value;
sum2.innerHTML="¥"+sums2;
var three=document.getElementById("three").innerHTML;
var sum3=document.getElementById("sum3");
var sums3=three*num.item(2).value;
sum3.innerHTML="¥"+sums3;
var sum4=document.getElementById("sum4");
var sums4=69.00*num.item(3).value;
sum4.innerHTML="¥"+sums4;
}
function choose(){ //选择物品 点击结算按钮 触发函数
var shops=document.getElementsByName("shop"); //获取name为shop的集合
var a=0;
var num=document.getElementsByName("price"); //获取name为price的集合
var one=document.getElementById("one").innerHTML; //获取单价
var two=document.getElementById("two").innerHTML;
var three=document.getElementById("three").innerHTML;
for(var i=0; i<shops.length;i++){
var shop=shops.item(i);
if(shop.checked==true){
if(shop.value=="1"){ a+=(one*num.item(0).value); }
if(shop.value=="2"){a+=(two*num.item(1).value); }
if(shop.value=="3"){a+=(three*num.item(2).value); }
if(shop.value=="4"){a+=(69.00*num.item(3).value); }
}
}
alert("你的支付金额是"+ a +"元");
}
function select(){ //已选商品0 件 总金额0元
var shops=document.getElementsByName("shop"); //getElementsByName()根据名字获取元素 获取name为shop的集合
var div=document.getElementById("select"); //已选商品<span id="select" class="red"> 0</span> 件
var sum=0;//商品数
for(var i=0; i<shops.length;i++){
var shop=shops.item(i);
if(shop.checked==true){
if(shop.value=="1"){ sum+=1; }
if(shop.value=="2"){ sum+=1;}
if(shop.value=="3"){ sum+=1;}
if(shop.value=="4"){ sum+=1;}
}
}
div.innerHTML=sum;
var num=document.getElementsByName("price");
var summoney=document.getElementById("sumoney");
var a=0; //定义a为总金额
for(var i=0; i<shops.length;i++){
var shop=shops.item(i);
if(shop.checked==true){
if(shop.value=="1"){ a+=(199.00*num.item(0).value); } //当选择的checkbox的值为1时执行
if(shop.value=="2"){a+=(328.30*num.item(1).value); } //当选择的checkbox的值为2时执行
if(shop.value=="3"){a+=(3699.00*num.item(2).value); } //当选择的checkbox的值为3时执行
if(shop.value=="4"){a+=(69.00*num.item(3).value); } //当选择的checkbox的值为3时执行
}
}
sumoney.innerHTML=a;
}
function selectDelete(){
var shops=document.getElementsByName("shop"); //getElementsByName()根据名字获取元素
var length=shops.length;
var flag=confirm("确定要删除吗？"); //提示是否要删除 flag=true/false ( true删除 false不删除)
if(flag==true){
for(var i=0;i<length;i++){
if(shops.item(i).checked==true){
if(shops.item(i).value="1"){
shops.item(i).parentNode.parentNode.remove();}
if(shops.item(i).value="2"){
shops.item(i).parentNode.parentNode.remove();}
if(shops.item(i).value="3"){
shops.item(i).parentNode.parentNode.remove();}
if(shops.item(i).value="4"){
shops.item(i).parentNode.parentNode.remove();}
}
}
}else{ //取消
}
}
</script>
</head>
<body>
<div>
<table id="myToby" border="1px" bordercolor="#999999" align="center" onclick="select()"> <!--//点击table内任何位子都会触发select()函数 传递显示选择的商品个数及总价格-->
<tr><td colspan="6"><img src="taobaogouwuche.png"/></td></tr>
<tr><td>
<input type="checkbox" name="choose" value="qaxuan" onclick="choseAll()" />全选
</td>
<td>
<p>商品信息</p>
</td>
<td><p>单价（元）</p></td>
<td><p>数量</p></td>
<td><p>金额（元）</p></td>
<td><p>操作</p></td>
</tr>
<tr bgcolor="#FFCCCC">
<td align="center"><input type="checkbox" name="shop" value="1" /><img src="shu1.jpg" width="100px" /></td> <!--//定义的每行的数量文本域 name 值一样。 checkbox name值一样 包含[value:1,2,3 ] ;全选单独box-->
<td valign="top"><a href="#">
彩色连环画中国历史（第一辑，1-10册）</a>
</td>
<td valign="top" >¥<span id="one">199.00</span></td>
<td valign="top"><input type="text" name="price" value="1" style="width:100px;" onchange="sum()" />
</td>
<td valign="top"><span id="sum1" class="red" >¥199.00</span></td>
<td valign="top"><a href="#" onclick="deleterow(this)">删除</a><br /><a href="#" onclick="addrow(this)">点击再加入购物车一套</a></td>
</tr>
<tr >
<td align="center"><input type="checkbox" name="shop" value="2"/><img src="shu2.jpg" width="100px" /></td>
<td valign="top"><a href="#">
余世存：我们的经典（套装8册） （当当独家签名版，附赠精美笔记本“不器”）</a>
</td>
<td valign="top" >¥<span id="two">328.30</span></td>
<td valign="top"> <input type="text" name="price" value="1" style="width:100px;" onchange="sum()" /></td> <!--// onchange 当文本域内容改变触发函数-->
<td valign="top"><span id="sum2" class="red">¥328.30</span></td>
<td valign="top"><a href="#" onclick="deleterow(this)">删除</a><br /><a href="#" onclick="addrow(this)">点击再加入购物车一套</a></td>
</tr>
<tr bgcolor="#99CC99">
<td align="center"><input type="checkbox" name="shop" value="3"/><img src="computer.jpg" width="100px" /></td>
<td valign="top"><a href="#">
联想（Lenovo）扬天V130（V110升级版）14英寸商务笔记本电脑</a>
</td>
<td valign="top" >¥<span id="three">3699.00</span></td>
<td valign="top"><input type="text" name="price" value="1" style="width:100px;" onchange="sum()"/> </td>
<td valign="top"><span id="sum3" class="red">¥3699.00</span></td>
<td valign="top"><a href="#" onclick="deleterow(this)">删除</a><br /><a href="#" onclick="addrow(this)">点击再加入购物车一套</a></td>
</tr>
</table><br /><br />
<span style="margin:820px">已选商品<span id="select" class="red"> 0</span> 件 总金额<span class="red" id="sumoney" >0</span>元
<hr />
<button name="addrow" onclick="tianjia()" style="width:260px; height:70px;background-color:#F00; color:#FFF; font-size:24px;">添加一行</button>
<button style=" float:right ; margin-right:200px;width:260px; height:70px; background-color:#F00; color:#FFF; font-size:24px;" onclick="choose()" >结算</button> <!-- //点击按钮触发choose()函数-->
<button onclick="selectDelete()" style="width:260px; height:70px;background-color:#F00; color:#FFF; font-size:24px;">批量删除</button>
</div>
</body>
</html>
本文详细介绍了一个基于HTML、CSS和JavaScript的购物车功能实现方案，包括全选、数量修改、删除商品、添加商品、计算总金额等功能。通过自定义函数如choseAll、sum、deleterow等，实现了购物车的基本交互。
扫一扫
646
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
