利用jQuery实现购物车功能

来源：互联网发布：设置首选网络类型4g 编辑：程序博客网时间：2024/06/14 20:11
<!DOCTYPE html><html>  <head>    <title>购物车----jQuery</title>    <meta charset="utf-8" />    <style type="text/css">      h1 {        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 type="text/javascript" src="../js/jquery-1.11.1.js"></script>    <script type="text/javascript">      function add_shoppingcart(btn){//将btn(dom)转换为jQuery对象    //先获取商品名字和单价还有库存以备后面使用    var $tds = $(btn).parent().siblings();        //$tds.eq(0)是jQuery对象  $tds[0]是DOM对象    var name = $tds.eq(0).html();//string    var price = $tds.eq(1).html();//string    var stock = $tds.eq(3).html();//string        //查看库存是否还有<=0    if(stock <= 0){      return;    }        //无论购物车中是否有该商品,库存都要-1    $tds.eq(3).html(--stock);        //在添加之前确定该商品在购物车中是否存在,若存在,则数量+1,若不存在则创建行    var $trs = $("#goods>tr");    for(var i=0;i<$trs.length;i++){      var $gtds = $trs.eq(i).children();      var gName = $gtds.eq(0).html();      if(name == gName){//若存在    var num = parseInt($gtds.eq(2).children().eq(1).val());    $gtds.eq(2).children().eq(1).val(++num);//数量+1    //金额从新计算    $gtds.eq(3).html(price*num);    return;//后面代码不再执行      }    }    //若不存在,创建后追加    var li =      "<tr>"+            "<td>"+name+"</td>"+            "<td>"+price+"</td>"+            "<td align='center'>"+              "<input type='button' value='-' onclick='decrease(this);'/> "+              "<input type='text' 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>";    //追加到#goods后面    $("#goods").append($(li));        //总计功能    total();      }            //辅助方法--单击购物车中的"+"  "-"  "x"按钮是找到相关商品所在td,以jQuery对象返回      function findStock(btn){    var name = $(btn).parent().siblings().eq(0).html();//获取商品名字    //注意table默认有行分组,若此处使用 $("#table1>tr:gt(0)")则找不到任何tr    var $trs = $("#table1>tbody>tr:gt(0)");    for(var i=0;i<$trs.length;i++){      var fName = $trs.eq(i).children().eq(0).html();      if(name == fName){//找到匹配的商品    return $trs.eq(i).children().eq(3);      }    }      }            //增加"+"功能      function increase(btn){    //获取该商品库存看是否<=0    var $stock = findStock(btn);    var stock = $stock.html();    if(stock <= 0){      return;    }    //库存-1      $stock.html(--stock);    //购物车数据改变    var $td = $(btn).prev();    var num = parseInt($td.val());//number    //num此时为number类型(在计算时会自动转换为number类型)    $td.val(++num);    //获取单价,再加计算前要先转换为number类型    var price = parseInt($(btn).parent().prev().html());    $(btn).parent().next().html(num*price);        //总计功能    total();      }            //减少"-"功能      function decrease(btn){    //该商品数量=1时候不能再减少    var num = parseInt($(btn).next().val());    if(num <= 1){      return;    }    var $stock = findStock(btn);    //库存+1    var stock = $stock.html();    $stock.html(++stock);    //商品数量-1    $(btn).next().val(--num);    //从新计算金额    var price = parseInt($(btn).parent().prev().html());    $(btn).parent().next().html(price*num);        //总计功能    total();      }            //"x"删除按钮功能      function del(btn){    //将商品数量归还库存    var $stock = findStock(btn);    var stock = parseInt($stock.html());    var num = parseInt($(btn).parent().prev().prev().children().eq(1).val());    $stock.html(num + stock);    //清空改行商品列表    $(btn).parent().parent().remove();        //总计功能    total();      }    //总计功能    function total(){      //获取所有购物车中的trs      var $trs = $("#goods tr");      var amount = 0;      for(var i=0;i<$trs.length;i++){    var money = parseInt($trs.eq(i).children().eq(3).html());    amount += money;      }      //写入总计栏      $("#total").html(amount);    }    </script>  </head>  <body>    <h1>真划算</h1>    <table id="table1">      <tr>        <th>商品</th>        <th>单价(元)</th>        <th>颜色</th>        <th>库存</th>        <th>好评率</th>        <th>操作</th>      </tr>         <tr>        <td>罗技M185鼠标</td>        <td>80</td>        <td>黑色</td>        <td>5</td>        <td>98%</td>        <td align="center">          <input type="button" value="加入购物车" onclick="add_shoppingcart(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="add_shoppingcart(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="add_shoppingcart(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="add_shoppingcart(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="add_shoppingcart(this);"/>        </td>      </tr>    </table>      <h1>购物车</h1>    <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>
0 0