jQuery实现购物车功能

最新推荐文章于 2024-08-12 03:28:09 发布

mind_programmonkey

最新推荐文章于 2024-08-12 03:28:09 发布

阅读量3.1k

点赞数 3

分类专栏：项目篇文章标签： jQuery 购物车

本文链接：https://blog.csdn.net/Mind_programmonkey/article/details/79821022

版权

项目篇同时被 2 个专栏收录

71 篇文章 20 订阅

订阅专栏

项目实战

26 篇文章 2 订阅

订阅专栏

基本功能：加入购物车的功能、增加（减少）数量、删除、总计等功能

源码：

<!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="../js/jquery-1.11.1.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" οnclick="decrease(this)" value="-"/>'+
			        '<input type="text" size="3"  value="1" readonly="readonly"/>'+
			        '<input type="button" value="+" οnclick="increase(this)" />'+
			        '</td>'+
			        '<td>'+price+'</td>'+
			        '<td align="center">'+
			        '<input type="button" οnclick="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="加入购物车" οnclick="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="加入购物车" οnclick="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="加入购物车" οnclick="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="加入购物车" οnclick="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>