使用JS+JQuery实现一个简单的购物车功能

最新推荐文章于 2022-05-11 20:27:17 发布

正在学Python的小陈

最新推荐文章于 2022-05-11 20:27:17 发布

阅读量2.6k

点赞数 7

分类专栏： JavaScript 文章标签： js jquery java

本文链接：https://blog.csdn.net/qq_39041451/article/details/103911400

版权

前言:最近刚学JQuery,今天项目经理给了一个练手的题,要求是实现点击表格中的"加入购物车"之后,能
够在下方的表格动态添加商品信息,并且动态修改商品的数量、金额和总价。
目前实现了点击加入购物车能添加到下面的表格中，但是无法增加数量和修改单价，希望大佬们能给点思路。后续如果做出来了我会更新此博客。
更新:功能已完善,达到所需效果
首先是html页面，如图：
在这里插入图片描述
但是目前只能做到加入购物车，无法增加数量和金额，如图：
更新:现在对代码做了修改,完成功能:
1.点击加入购物车,能将商品信息加入到购物车中并更新数量、金额以及总价信息
2.点击购物车中的input按钮,能够增加或减少数量,并更新金额以及总价信息
3.当购物车数量变化时,动态的更新数量、金额以及总价信息(如删除商品时)
在这里插入图片描述
代码如下：

<body>
<h1>特价商品</h1>
<div class="sp1">
          <table id="LB">
    <tr>
              <th>商品名称</th>
              <th>单价</th>
              <th>库存</th>
              <th>好评率</th>
              <th>操作</th>
            </tr>
    <tr id="SB">
              <td id="SB_Name">水杯</td>
              <td id="SB_price">25</td>
              <td id="SB_count">100</td>
              <td>90%</td>
              <td><input type="button" value="加入购物车" onClick="addcar(this)" /></td>
            </tr>
    <tr id="JP">
              <td>键盘</td>
              <td>100</td>
              <td id="jianpan">300</td>
              <td>80%</td>
              <td><input type="button" value="加入购物车" onClick="addcar(this)"/></td>
            </tr>
    <tr id="SJ">
              <td>华为手机</td>
              <td>5000</td>
              <td id="phone">50</td>
              <td>100%</td>
              <td><input type="button" value="加入购物车" onClick="addcar(this)" /></td>
            </tr

最低0.47元/天解锁文章

正在学Python的小陈

关注

7
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
使用JS+JQuery实现一个简单的购物车功能

实现简易购物车的新增、删除、加减数量以及根据数量动态显示金额和总价的功能。前言:最近刚学JQuery,今天项目经理给了一个练手的题,要求是实现点击表格中的"加入购物车"之后,能够在下方的表格动态添加商品信息,并且动态修改商品的数量、金额和总价。目前实现了点击加入购物车能添加到下面的表格中，但是无法增加数量和修改单价，希望大佬们能给点思路。后续如果做出来了我会更新此博客。首先是html页面，如图：但是目前只能做到加入购物车，无法增加数量和金额，如图：代码如下：...
复制链接

扫一扫