简易购物车

Posted 2022-04-05 taoist123
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了简易购物车相关的知识，希望对你有一定的参考价值。
<!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>
技术图片
代码来自网络: 若侵权请联系删除.
以上是关于简易购物车的主要内容，如果未能解决你的问题，请参考以下文章