jquery怎么实现购物车功能

2023-06-20 19:06:48 953人浏览薄情痞子

摘要

本篇内容主要讲解“Jquery怎么实现购物车功能”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“jquery怎么实现购物车功能”吧!html<!DOCTYPE html>&l

本篇内容主要讲解“Jquery怎么实现购物车功能”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“jquery怎么实现购物车功能”吧!

<!DOCTYPE html><html><head><title>购物车</title><meta charset="utf-8" /><style type="text/CSS">h2 {    text-align: center;} table {    margin: 0 auto;    width: 60%;    border: 2px solid #aaa;    border-collapse: collapse;} table th, table td {    border: 2px solid #aaa;    padding: 5px;} th {    background-color: #eee;}</style><script src="jquery-3.2.1.min.js"></script><script src="gw.js"></script></head><body>    <h2>真划算</h2>    <table id="tb1">        <tr>            <th>商品</th>            <th>单价(元)</th>            <th>颜色</th>            <th>库存</th>            <th>好评率</th>            <th>操作</th>        </tr>        <tr>            <td>罗技M185鼠标</td>            <td>80</td>            <td>黑色</td>            <td>893</td>            <td>98%</td>            <td align="center"><input type="button" value="加入购物车"                onclick="addshoping(this);" /></td>        </tr>        <tr>            <td>微软X470键盘</td>            <td>150</td>            <td>黑色</td>            <td>9028</td>            <td>96%</td>            <td align="center"><input type="button" value="加入购物车"                onclick="addshoping(this);" /></td>        </tr>        <tr>            <td>洛克iphone6手机壳</td>            <td>60</td>            <td>透明</td>            <td>672</td>            <td>99%</td>            <td align="center"><input type="button" value="加入购物车"                onclick="addshoping(this);" /></td>        </tr>        <tr>            <td>蓝牙耳机</td>            <td>100</td>            <td>蓝色</td>            <td>8937</td>            <td>95%</td>            <td align="center"><input type="button" value="加入购物车"                onclick="addshoping(this);" /></td>        </tr>        <tr>            <td>金士顿U盘</td>            <td>70</td>            <td>红色</td>            <td>482</td>            <td>100%</td>            <td align="center"><input type="button" value="加入购物车"                onclick="addshoping(this);" /></td>        </tr>    </table>     <h2>购物车</h2>    <table>        <thead>            <tr>                <th>商品</th>                <th>单价(元)</th>                <th>数量</th>                <th>金额(元)</th>                <th>删除</th>            </tr>        </thead>        <tbody id="Goods">         </tbody>        <tfoot>            <tr>                <td colspan="3" align="right">总计</td>                <td id="total"></td>                <td></td>            </tr>        </tfoot>    </table> </body></html>

//添加购物车function addshoping(btn) {         var name = $(btn).parent().siblings().eq(0).html()        var price = $(btn).parent().siblings().eq(1).html()          var trs = $("#goods tr")         var nameArr = new Array();         $.each(trs, function (index, value) {             nameArr.push($(this).children('td').eq(0).text())         })        var $tr = $('<tr>' +            '<td>' + name + '</td>' +            '<td>' + price + '</td>' +            '<td align="center">' +            '<input type="button" value="-" onclick="jian(this);"/> ' +            '<input type="number" size="3" readonly value="1"/> ' +            '<input type="button" value="+" onclick="increase(this);"/>' +            '</td>' +            '<td>' + price + '</td>' +            '<td align="center"><input type="button" value="x" onclick="del(this);"/></td>' +            '</tr>');        var ishasName = nameArr.indexOf(name)                if (ishasName >= 0) {            var goodcount=trs.eq(ishasName).children('td').eq(2).children().eq(1).val()            Number.parseInt(goodcount);            trs.eq(ishasName).children('td').eq(2).children().eq(1).val(++goodcount)            var price=trs.eq(ishasName).children('td').eq(1).html()             Number.parseInt(price)             trs.eq(ishasName).children('td').eq(3).html(goodcount*price);                                    } else {            // $tr.insertAfter($("#goods tr:eq(0)"))            $("#goods").append($tr);         }            var kucun = tds.eq(3).html()   Number.parseInt(kucun)   tds.eq(3).html(--kucun)         sum()    }    //增加    function increase(btn){        var num=$(btn).prev().val()        Number.parseInt(num);        var bignew=$(btn).prev().val(++num)        var price = $(btn).parent().prev().html();        $(btn).parent().next().html(num*price);        sum();        };    //减少    function jian(btn){                var num=$(btn).next().val()        if(num<=1){            return;        }        Number.parseInt(--num)        var price = $(btn).parent().prev().html();        var newprice=$(btn).parent().next().html();                $(btn).parent().next().html(newprice-price);        $(btn).next().val(num)          sum()    }    //删除    function del(btn){       $(btn).parent().parent().remove()       sum();    }    //总和    function sum() {// 获取tbody下的所有行var $trs = $("#goods tr");// 遍历他们var sum = 0;for (var i = 0; i < $trs.length; i++) {    // 获取每一行    var $tr = $trs.eq(i);    // 获取该行中第四列的值(金额)    var mny = $tr.children().eq(3).html();    sum += parseFloat(mny);}// 写入到合计$("#total").html(sum);};

运行结果：

jquery怎么实现购物车功能