<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>购物车</title>
<style type="text/css">
h1{
text-align:center}
table{
margin:0 auto;
width:60%;
border:2px solid #09C;
border-collapse:collapse}
table th,table td{
border:2px solid #09C;
padding:5px;
}
th{
background-color:#0CC;}
</style>
<script type="text/javascript" src="jquery-1.12.4.js"></script>
<script type="text/javascript">
//添加到购物车的功能
function addShopping(btn){
//先获取按钮的父亲的兄弟们
var $tds=$(btn).parent().siblings();
//商品名称
var name=$tds.eq(0).html();
//商品单价
var price=$tds.eq(1).html();
//新建一行的对象
var row=$(
‘<tr>‘+
‘<td>‘+name+‘</td>‘+
‘<td>‘+price+‘</td>‘+
‘<td>‘+
‘<input type="button" onclick="decrease(this)" value="-"/>‘+
‘<input type="text" size="3" value="1" readonly="readonly"/>‘+
‘<input type="button" value="+" onclick="increase(this)" />‘+
‘</td>‘+
‘<td>‘+price+‘</td>‘+
‘<td align="center">‘+
‘<input type="button" onclick="del(this)" value="x"/>‘+
‘</td>‘+
‘</tr>‘
);
//添加到下方购物车里面
$("#goods").append(row);
total();
}
//删除功能
function del(btn){
$(btn).parent().parent().remove();
total();
}
//增加功能
function increase(btn){
//获取按钮的哥哥的值（数量）
var amount=$(btn).prev().val();
$(btn).prev().val(++amount);
//获取按钮的父亲的哥哥的内容（单价）
var price=$(btn).parent().prev().html();
//计算总金额,并写入按钮的父亲的弟弟内
$(btn).parent().next().html(amount*price);
console.log(price);//锚点，用来查错
total();
}
//减少功能
function decrease(btn){
//获取按钮的哥哥的值（数量）
var amount=$(btn).next().val();
if(amount<=0){
return;
}
$(btn).next().val(--amount);
//获取按钮的父亲的哥哥的内容（单价）
var price=$(btn).parent().prev().html();
//计算总金额,并写入按钮的父亲的弟弟内
$(btn).parent().next().html(amount*price);
total();
}
//总计功能
function total(){
//获取购车车的所有行
var $trs=$("#goods tr");
//存储总金额
var sum=0;
//遍历所有行
for(var i=0;i<$trs.length;i++){
//找到每一行的金额那一项
var money=$trs.eq(i).children().eq(3).html();
//字符串转成数字
sum=sum+parseInt(money);
}
//显示金额
$("#total").html(sum);
}
</script>
</head>
<body>
<h1>真划算</h1>
<table>
<tr>
<th>商品</th>
<th>单价</th>
<th>颜色</th>
<th>库存</th>
<th>好评率</th>
<th>操作</th>
</tr>
<tr>
<td>罗技鼠标</td>
<td>80</td>
<td>黑色</td>
<td>893</td>
<td>98%</td>
<td align="center"><input type="button" value="加入购物车" onclick="addShopping(this)"/></td>
</tr>
<tr>
<td>微软键盘</td>
<td>150</td>
<td>黑色</td>
<td>100</td>
<td>98%</td>
<td align="center"><input type="button" value="加入购物车" onclick="addShopping(this)"/></td>
</tr>
<tr>
<td>手机壳</td>
<td>60</td>
<td>透明</td>
<td>200</td>
<td>98%</td>
<td align="center"><input type="button" value="加入购物车" onclick="addShopping(this)"/></td>
</tr>
<tr>
<td>耳机</td>
<td>100</td>
<td>蓝色</td>
<td>302</td>
<td>98%</td>
<td align="center"><input type="button" value="加入购物车" onclick="addShopping(this)"/></td>
</tr>
</table>
<h1>购物车</h1>
<table>
<thead>
<tr>
<td>商品</td>
<td>单价</td>
<td>数量</td>
<td>金额</td>
<td>删除</td>
</tr>
</thead>
<tbody id="goods">
<!--
<tr>
<td>罗技鼠标</td>
<td>80</td>
<td>
<input type="button" value="-"/>
<input type="text" size="3" readonly="readonly"/>
<input type="button" value="+"/>
</td>
<td>80</td>
<td align="center">
<input type="button" value="*"/>
</td>
</tr>
-->
</tbody>
<tfoot>
<tr>
<td colspan="3" align="right">总计</td>
<td id="total"></td>
<td></td>
</tr>
</tfoot>
</table>
</body>
</html>
代码来自网络: 若侵权请联系删除.
原文地址：https://www.cnblogs.com/taoist123/p/11172219.html
时间： 2024-08-05 13:25:28