jquery购物车2

最新推荐文章于 2022-11-27 10:06:40 发布

永泽心语

最新推荐文章于 2022-11-27 10:06:40 发布

阅读量108

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_45740126/article/details/119256192

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

原型图

代码实现

<!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>
    <script src="jquery-3.2.1.min.js"></script>
    <style type="text/css">
        * {
            font-size: 12px;
        }
    </style>

</head>

<body>
    <script>
        //减少
        function delNumber(btn) {
            var number = $(btn).next().val()
            Number.parseInt(number)
            //数量不能小于1
            if (number >= 1) {
                $(btn).next().val(--number)
            }
            //判断所在行的下标
            var tr = $(btn).parent().parent().index()
            console.log(tr)
            var price2 = 32.9
            var price3 = 3339
            if (tr == 1) {
                var newprice = price2 * number
                $(btn).parent().siblings().eq(2).text("￥" + newprice + "元")
            } else {
                var newprice = price3 * number
                $(btn).parent().siblings().eq(2).text("￥" + newprice + "元")
            }
        }

        //添加
        function addNumber(btn) {
            var number = $(btn).prev().val()
            Number.parseInt(number)
            $(btn).prev().val(++number)
            //判断所在行的下标
            var tr = $(btn).parent().parent().index()
            console.log(tr)
            var price2 = 32.9
            var price3 = 3339
            if (tr == 1) {
                var newprice = price2 * number
                $(btn).parent().siblings().eq(2).text("￥" + newprice + "元")
            } else {
                var newprice = price3 * number
                $(btn).parent().siblings().eq(2).text("￥" + newprice + "元")
            }
        }


        //全选/反选
        function quan() {
            var isTrue = $("table tr:eq(0) th>input").prop("checked")
            if (isTrue) {
                $.each($(":checkbox"), function (index, value) {
                    $(this).prop("checked", true)
                })
            } else {
                $.each($(":checkbox"), function (index, value) {
                    $(this).prop("checked", false)
                })
            }

        }
        //批量删除
        function delchecked() {
            $.each($("table tr:gt(0) :checkbox"), function (index, value) {
                var isTrue = $(this).prop("checked")
                if (isTrue) {
                    $(this).parent().parent().remove()
                    $("table tr:eq(0) :checkbox").prop('checked', false)
                }
            })

        }
        //随机添加
        function add() {
            var tr = $("table tr:gt(0)")
            var len = tr.length;
            console.log(len)
            //随机获取一行的下标
            var ran = parseInt(len * Math.random())
            console.log(ran)
            var number1 = $("table tr:gt(0)").eq(ran).children('td').eq(3).children().eq(1).val()
            $("table tr:gt(0)").eq(ran).children('td').eq(3).children().eq(1).val(++number1);
            var price1 = 32.9
            var price2 = 3339
            if (ran == 0) {
                $("table tr:gt(0)").eq(ran).children('td').eq(2).text("￥" + price1 * number1 + "元")
            } else {
                $("table tr:gt(0)").eq(ran).children('td').eq(2).text("￥" + price2 * number1 + "元")
            }
        }
        //删除一行
        $(function () {
            $(".del").click(function () {
                $(this).parent().parent().remove()
            })
        })


    </script>

    <table border="1" cellpadding="0" cellspacing="0">
        <tr>
            <th><input type='checkbox' onchange="quan()" />全选</th>
            <th>商品信息</th>
            <th>宜美惠价</th>
            <th>数量</th>
            <th>操作</th>

        </tr>

        <tr class="tr_0">
            <td>
                <input name="" type="checkbox" value="" />
            </td>
            <td>
                <img src="images/sang.gif" class="products" /><a href="#">天堂雨伞</a>
            </td>
            <td>￥32.9元
            </td>
            <td>
                <img src="images/subtraction.gif" width="20" height="20" onclick="delNumber(this)" />
                <input type="text" class="quantity" value="1" />
                <img src="images/add.gif" width="20" height="20" onclick="addNumber(this)" />
            </td>
            <td>
                <a href="#" class="del">删除</a>
            </td>
        </tr>
        <tr>
            <td>
                <input name="" type="checkbox" value="" />
            </td>
            <td>
                <img src="images/iphone.gif" class="products" /><a href="#">苹果手机iphone5</a>
            </td>
            <td>￥3339元
            </td>
            <td>
                <img src="images/subtraction.gif" width="20" height="20" onclick="delNumber(this)" />
                <input type="text" class="quantity" value="1" />
                <img src="images/add.gif" width="20" height="20" onclick="addNumber(this)" />
            </td>
            <td>
                <a href="#" class="del">删除</a>
            </td>
        </tr>

    </table>

    <a href="#" class="add" onclick="add()">添加</a>
    <a href="#" id="del" onclick="delchecked()">删除</a>
</body>

</html>