ouyou57 2021-09-11 14:58 采纳率: 50%
浏览 134
已结题

JavaScript依据已知代码实现购物车系统，实现加减、删除、小计、总计

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="box">
        <table border="1" cellspacing="0" cellpadding="10">
            <tbody>
                <tr>
                    <td class="all"><input type="checkbox"></td>
                    <td>名称</td>
                    <td>单价</td>
                    <td>颜色</td>
                    <td>重量</td>
                    <td>减少</td>
                    <td>数量</td>
                    <td>增加</td>
                    <td>总价</td>
                    <td>操作</td>
                </tr>
                <tr>
                    <td class="checked"><input type="checkbox"></td>
                    <td>小米手机</td>
                    <td class="price">1500</td>
                    <td>黑色</td>
                    <td>0.5kg </td>
                    <td class="btn">-</td>
                    <td class="number"> <input type="text" value="2" style="width:20px;"> </td>
                    <td class="btn">+</td>
                    <td class="totle">3000</td>
                    <td class="delete">删除</td>
                </tr>
                <tr>
                    <td class="checked"><input type="checkbox"></td>
                    <td>华为手机</td>
                    <td class="price">1698</td>
                    <td>蓝色</td>
                    <td>0.45kg </td>
                    <td class="btn">-</td>
                    <td class="number"> <input type="text" value="2" style="width:20px;"> </td>
                    <td class="btn">+</td>
                    <td class="totle">5094</td>
                    <td class="delete">删除</td>
                </tr>
                <tr>
                    <td class="checked"><input type="checkbox"></td>
                    <td>iphoneX</td>
                    <td class="price">7899</td>
                    <td>红色</td>
                    <td>0.6kg</td>
                    <td class="btn">-</td>
                    <td class="number"> <input type="text" value="2" style="width:20px;"> </td>
                    <td class="btn">+</td>
                    <td class="totle">55293</td>
                    <td class="delete">删除</td>
                </tr>
            </tbody>
        </table>
    </div>

    <h3>所有商品合计: 0元</h3>
  • 写回答

1条回答 默认 最新

  • CSDN专家-showbo 2021-09-11 15:18
    关注

    题主要的代码如下，有帮助
    有帮助麻烦点个采纳【本回答右上角】，谢谢~~有其他问题可以继续交流~

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="box">
        <table border="1" cellspacing="0" cellpadding="10">
            <tbody>
                <tr>
                    <td class="all"><input type="checkbox"></td>
                    <td>名称</td>
                    <td>单价</td>
                    <td>颜色</td>
                    <td>重量</td>
                    <td>减少</td>
                    <td>数量</td>
                    <td>增加</td>
                    <td>总价</td>
                    <td>操作</td>
                </tr>
                <tr>
                    <td class="checked"><input type="checkbox"></td>
                    <td>小米手机</td>
                    <td class="price">1500</td>
                    <td>黑色</td>
                    <td>0.5kg </td>
                    <td class="btn">-</td>
                    <td class="number"> <input type="text" value="2" style="width:20px;"> </td>
                    <td class="btn">+</td>
                    <td class="totle">3000</td>
                    <td class="delete">删除</td>
                </tr>
                <tr>
                    <td class="checked"><input type="checkbox"></td>
                    <td>华为手机</td>
                    <td class="price">1698</td>
                    <td>蓝色</td>
                    <td>0.45kg </td>
                    <td class="btn">-</td>
                    <td class="number"> <input type="text" value="1" style="width:20px;"> </td>
                    <td class="btn">+</td>
                    <td class="totle">1698</td>
                    <td class="delete">删除</td>
                </tr>
                <tr>
                    <td class="checked"><input type="checkbox"></td>
                    <td>iphoneX</td>
                    <td class="price">7899</td>
                    <td>红色</td>
                    <td>0.6kg</td>
                    <td class="btn">-</td>
                    <td class="number"> <input type="text" value="2" style="width:20px;"> </td>
                    <td class="btn">+</td>
                    <td class="totle">15798</td>
                    <td class="delete">删除</td>
                </tr>
            </tbody>
        </table>
    </div>
    <h3>所有商品合计: <span id="tl">0</span>元</h3>

    <script src="https://g.csdnimg.cn/??lib/jquery/1.12.4/jquery.min.js"></script>
    <script>
        $('td.btn').click(function () {
            var op = this.innerText, ipt = $(this)[op == '-' ? 'next' : 'prev']().find('input'), v = parseInt(ipt.val());
            v += op == '-' ? -1 : 1;
            if (v < 0) v = 0;
            ipt.val(v);
            var tr = ipt.closest('tr');
            tr.find('td.totle').html(v * parseFloat(tr.find('.price').text()));
            getTotal();
        })

        $('td.delete').click(function () {
            if (confirm('确认删除？')) {
                $(this).closest('tr').remove();
                checkboxs = $('#box :checkbox');
                getTotal();
            }
        });
        var checkboxs = $('#box :checkbox').change(function () {
            var el = $(this)
            if (el.parent().attr('class') == 'all') {
                checkboxs.not(this).prop('checked', this.checked);
            }
            else {
                checkboxs.eq(0).prop('checked', checkboxs.parent().filter(':not(.all)').find(':checkbox').filter(':checked').length == checkboxs.length - 1);
            }

            getTotal();
        });
        function getTotal() {
            var sum = 0;
            checkboxs.parent().filter(':not(.all)').find(':checkbox').filter(':checked').closest('tr').each(function () {
                sum += parseFloat($(this).find('.totle').text())
            })
            $('#tl').html(sum);
        }
    </script>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题？

问题事件

  • 系统已结题 9月19日
  • 已采纳回答 9月11日
  • 修改了问题 9月11日
  • 创建了问题 9月11日

悬赏问题

  • ¥15 FPGA-SRIO初始化失败
  • ¥15 MapReduce实现倒排索引失败
  • ¥15 luckysheet
  • ¥15 ZABBIX6.0L连接数据库报错，如何解决？(操作系统-centos)
  • ¥15 找一位技术过硬的游戏pj程序员
  • ¥15 matlab生成电测深三层曲线模型代码
  • ¥50 随机森林与房贷信用风险模型
  • ¥50 buildozer打包kivy app失败
  • ¥30 在vs2022里运行python代码
  • ¥15 不同尺寸货物如何寻找合适的包装箱型谱