购物车实现增删 商品数的底层逻辑js 无委托

最新推荐文章于 2023-04-03 21:31:00 发布
最新推荐文章于 2023-04-03 21:31:00 发布
阅读量918 收藏 2
点赞数 2
分类专栏： js 前端 文章标签： javascript 开发语言 ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45812595/article/details/121754516
版权
js 同时被 2 个专栏收录
13 篇文章 0 订阅
订阅专栏
前端
11 篇文章 0 订阅
订阅专栏

运行展示页面

 先布置html布局

 <div id="formDiv">
        <h4>添加商品</h4>
        <table>
            <tr>
                <td class="word">商品名称：</td>
                <td class="inp">
                    <input type="text" name="empName" id="empName">
                </td>
            </tr>
            
           
            <tr>
                <td colspan="2" align="center">
                    <button id="addEmpButton" value="abc">
                        添加
                    </button>
                </td>
               
            </tr>
        </table>
    </div>
  <div id="result">
    <!-- <button>添加商品</button> -->
    <table id = "employeeTable">
        <tr>
            <th>Number</th>
            <th>商品名称</th>
            <th>数量</th>
			<th>价格</th>
            <th>&nbsp;</th>
        </tr>
        <tr>
            <td>1</td>
			<td>加多宝</td>
			<td>
				<button class= "reduce">-</button><input type="text" value="0" style="width: 25px;height: 20px;text-align: center;"><button class = "plus">+</button>
			</td>
			<td>5.5</td>
            <td><a href="#">删除</a></td>
        </tr>
        <tr>
			<td>2</td>
			<td>卫龙辣条</td>
			<td>
				<button class = "reduce">-</button ><input type="text" value="0" style="width: 25px;height: 20px;text-align: center;"><button class = "plus">+</button>
				</td>
			<td>0.5</td>
            <td><a href="#">删除</a></td>
        </tr>
        <tr>
			<td>3</td>
			<td>螺蛳粉</td>
			<td>
				<button class= "reduce">-</button><input type="text" value="0" style="width: 25px;height: 20px;text-align: center;"><button class = "plus">+</button>
			</td>
			<td>9.5</td>
            <td><a href="#">删除</a></td>
        </tr>
		<tfoot>
			<td colspan="5" id = "total">总计：</td>
		</tfoot>
    </table>
  </div>

再设置好css

    <style>
        		*{
			margin: 0;
			padding: 0;
		}
		#result,#formDiv{
			width: 500px;
			background-color:orange;
			margin-left: 200px;
			margin-top: 50px;
		}
		table{
			margin: 50px auto;
		}
		tr{
			width: 255px;
			min-height: 23px;
		}
		tr:nth-of-type(even){
			background-color: pink;
		}
		tr:nth-of-type(odd){
			background-color:deepskyblue;
		}
		input{
			outline: none;
		}
		#employeeTable{
			text-align: center;
		}
		#addEmpButton,#gen{
			width: 100px;
		}
		button{
			width: 25px;
			height: 25px;
			font-size: 12px;
		}
    </style>

js部分 ：

1.添加商品

需求：输入商品名称时，当点击添加按钮，会在商品区表格渲染出来 价格随机

想法：先拿到输入框的值判断是否为空，不为空给添加按钮设置点击事件，当点击时 动态创建tr

      /*
      增加商品 想法 拿到添加按钮 设置商品初始值i 判断内容不能为空 每当点击添加一次 初始值加以 
                    并拼接字符串tr
      
      */
     //拿到添加按钮
     let add = document.getElementById('addEmpButton')
     console.log(add)
     let shopnum = 3
     //给添加按钮绑定事件
    add.onclick = function(){
       //每点击一次 就自动加1
        shopnum += 1
        //获取框里的值
        let input = document.getElementById('empName').value;
        //判断商品不能为空
        if(!input){
            confirm('添加商品不能为空')
            return
        }
        var price = Math.floor(Math.random()*20)
        console.log(price)
       //不用拼接 创建tr 给tr里面赋值innerHTML
       var tr = document.createElement('tr')
       tr.innerHTML = `   <tr>
			<td>${shopnum}</td>
			<td>${input}</td>
			<td>
				<button class = "reduce">-</button ><input type="text" value="0" style="width: 25px;height: 20px;text-align: center;"><button class = "plus">+</button>
				</td>
			<td>${price}</td>
            <td><a href="#">删除</a></td>
        </tr>`
          //将tr追加到tbody里
     document.getElementsByTagName('tbody')[1].appendChild(tr)
    }

2.删除商品

需求：当点击删除键时 会弹出提示，确定则删除它

想法：拿到删除按钮 给其绑上点击事件 再找到点击时对应的行 拿到行中第一个td即name 设置flag 点击弹出提示 确定 则移除当行

  //拿到删除按钮
      let del = document.getElementsByTagName('a')
      console.log(del)
      //遍历它 
      for(let i = 0;i<del.length;i++){
          //给每个删除按钮绑定事件
          del[i].onclick = function(){
              //找到它的行
              let tr = this.parentNode.parentNode     
              //拿到行中第一个td即name 通过获取标签名拿 因为是td所以用innerHTML       
              let name = tr.getElementsByTagName('td')[1].innerHTML
              console.log(name)
              //当点击当前删除时 弹出消息
             let flag = confirm(`确定删除${name}吗？`)
             if(flag){
                  //删除自己
                tr.remove(tr)
             }
          }
      }

运行发现问题：

问题：新增加的商品 当点击删除按钮时没有反应

解决：要在添加商品时 在其后面再给新增的tr设置删除功能

         //将tr追加到tbody里
     document.getElementsByTagName('tbody')[1].appendChild(tr)
     //再将添加的商品 设置删除 在tr后拿
     let a = tr.getElementsByTagName('a')[0]
     console.log(a)
     //a为当前的啊
     a.onclick = function (){
         let tr = this.parentNode.parentNode
         let name= document.getElementById('empName').value;
         console.log(name)
         let flag = confirm(`确定要删除${name}吗？`)
         if(flag){
             tr.remove(tr)
         }
     }
     document.getElementById('empName').value = ''
    }

加减按钮

拿到 加减两侧按钮 再拿到里面的value值 转为数字型 自增自减即可 

问题： --this.nextElementSibling.value 不能用变量存储 判断时也不能 

         因为改变的是值 不是地址 所以要直接引用

        //加减两侧按钮
   //拿到加 减
   var table = document.getElementById('employeeTable')
   var addb = table.getElementsByClassName('plus')
   var redb = table.getElementsByClassName('reduce')
   console.log(addb,redb)
//    var num =1;
   //用onclick 绑定点前点击
    for(let i = 0; i<redb.length;i++){
        redb[i].onclick = function(){
            //拿到当前点击加里面框里的值
            var num = --this.nextElementSibling.value
            if(this.nextElementSibling.value<0){
                this.nextElementSibling.value = 0;
            }
            // var num = ++input
          
   }
    }
    for(let j = 0;j<addb.length;j++){
        addb[j].onclick = function(){
            var num = ++this.previousSibling.value
            console.log(num)
        }

    }

整体代码

html

<body>
    <div id="formDiv">
        <h4>添加商品</h4>
        <table>
            <tr>
                <td class="word">商品名称：</td>
                <td class="inp">
                    <input type="text" name="empName" id="empName">
                </td>
            </tr>
            
           
            <tr>
                <td colspan="2" align="center">
                    <button id="addEmpButton" value="abc">
                        添加
                    </button>
                </td>
               
            </tr>
        </table>
    </div>
  <div id="result">
    <!-- <button>添加商品</button> -->
    <table id = "employeeTable">
       <thead>
        <tr>
            <th>Number</th>
            <th>商品名称</th>
            <th>数量</th>
			<th>价格</th>
            <th>&nbsp;</th>
        </tr>
       </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>加多宝</td>
                <td>
                    <button class= "reduce">-</button><input type="text" value="0" style="width: 25px;height: 20px;text-align: center;"><button class = "plus">+</button>
                </td>
                <td>5.5</td>
                <td><a href="#">删除</a></td>
            </tr>
            <tr>
                <td>2</td>
                <td>卫龙辣条</td>
                <td>
                    <button class = "reduce">-</button ><input type="text" value="0" style="width: 25px;height: 20px;text-align: center;"><button class = "plus">+</button>
                    </td>
                <td>0.5</td>
                <td><a href="#">删除</a></td>
            </tr>
            <tr>
                <td>3</td>
                <td>螺蛳粉</td>
                <td>
                    <button class= "reduce">-</button><input type="text" value="0" style="width: 25px;height: 20px;text-align: center;"><button class = "plus">+</button>
                </td>
                <td>9.5</td>
                <td><a href="#">删除</a></td>
            </tr>
        </tbody>
		<tfoot>
			<td colspan="5" id = "total">总计：</td>
		</tfoot>
    </table>
  </div>

CSS

 <style>
        		*{
			margin: 0;
			padding: 0;
		}
		#result,#formDiv{
			width: 500px;
			background-color:orange;
			margin-left: 200px;
			margin-top: 50px;
		}
		table{
			margin: 50px auto;
		}
		tr{
			width: 255px;
			min-height: 23px;
		}
		tr:nth-of-type(even){
			background-color: pink;
		}
		tr:nth-of-type(odd){
			background-color:deepskyblue;
		}
		input{
			outline: none;
		}
		#employeeTable{
			text-align: center;
		}
		#addEmpButton,#gen{
			width: 100px;
		}
		button{
			width: 25px;
			height: 25px;
			font-size: 12px;
		}
    </style>

js

     window.onload = function(){
          /*
          删除事件 想法：拿到删除按钮 给其绑上点击事件 再找到点击时对应的行 拿到行中第一个td即name 
                        设置flag 点击弹出提示 确定 则移除当行
          */
      //拿到删除按钮
      let del = document.getElementsByTagName('a')
      //遍历它 
      for(let i = 0;i<del.length;i++){
          //给每个删除按钮绑定事件
          del[i].onclick = function(){
              //找到它的行
              var tr = this.parentNode.parentNode     
              //拿到行中第一个td即name 通过获取标签名拿 因为是td所以用innerHTML       
              var name = tr.getElementsByTagName('td')[1].innerHTML
              console.log(name)
              //当点击当前删除时 弹出消息
             let flag = confirm(`确定删除${name}吗？`)
             if(flag){
                  //删除自己
                tr.remove(tr)
             }
          }
      }
      /*
      增加商品 想法 拿到添加按钮 设置商品初始值i 判断内容不能为空 每当点击添加一次 初始值加以 
                    并拼接字符串tr
      
      */
     //拿到添加按钮
     let add = document.getElementById('addEmpButton')
     let shopnum = 3
     //给添加按钮绑定事件
    add.onclick = function(){
       //每点击一次 就自动加1
        shopnum += 1
        //获取框里的值
        let input = document.getElementById('empName').value;
        //判断商品不能为空
        if(!input){
            confirm('添加商品不能为空')
            return
        }
        var price = Math.floor(Math.random()*20)
       //不用拼接 创建tr 给tr里面赋值innerHTML
       var tr = document.createElement('tr')
       tr.innerHTML = `   <tr>
			<td>${shopnum}</td>
			<td>${input}</td>
			<td>
				<button class = "reduce">-</button ><input type="text" value="0" style="width: 25px;height: 20px;text-align: center;"><button class = "plus">+</button>
				</td>
			<td>${price}</td>
            <td><a href="#">删除</a></td>
        </tr>`
          //将tr追加到tbody里
     document.getElementsByTagName('tbody')[1].appendChild(tr)
     //再将添加的商品 设置删除 在tr后拿
     let a = tr.getElementsByTagName('a')[0]
     console.log(a)
     //a为当前的啊
     a.onclick = function (){
         let tr = this.parentNode.parentNode
         let name= document.getElementById('empName').value;
         console.log(name)
         let flag = confirm(`确定要删除${name}吗？`)
         if(flag){
             tr.remove(tr)
         }
     }
     document.getElementById('empName').value = ''
        //加减两侧按钮
   //拿到加 减
   var table = document.getElementById('employeeTable')
   var addb = table.getElementsByClassName('plus')
   var redb = table.getElementsByClassName('reduce')
   console.log(addb,redb)
//    var num =1;
   //用onclick 绑定点前点击
    for(let i = 0; i<redb.length;i++){
        redb[i].onclick = function(){
            //拿到当前点击加里面框里的值
            var num = --this.nextElementSibling.value
            if(this.nextElementSibling.value<0){
                this.nextElementSibling.value = 0;
            }
            // var num = ++input
          
   }
    }
    for(let j = 0;j<addb.length;j++){
        addb[j].onclick = function(){
            var num = ++this.previousSibling.value
            console.log(num)
        }

    }
    }  

}

取名好难i
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
servlet+jsp实现购物车的增删改查.rar
09-03
刚开始学习的时候自己敲的一些代码，希望大家能一起快乐的学习，相信代码改变世界，加油！
web-jsp（15） 购物车
qq_64286752的博客
04-27 1639
目录 1.car.jsp(购物车） 2.doDelCar.jsp(删除购物车选项功能） 3.doUpdCar.jsp(购物车数量加减） 4.docClear.jsp(购物车全选清空） 5.doEite.jsp 6，index.jsp 7,建表语句 1.car.jsp(购物车） <%@page import="com.zking.pojo.User"%> <%@page import="java.util.List"%> <%@page import=..
js购物车计算和删除(较为常见)
weixin_43368552的博客
08-18 2113
主要是执行删除操作的时候，商品数量和小计，需要重新获取才能计算总价。
JS | “购物车”增、删、改、查的案例
m0_72383454的博客
09-02 2995
这是一个“购物车”添加、删除等功能的一个案例
实现购物车功能(新增、查询、删除、清空、修改)
m0_72710328的博客
01-02 4237
实现电商网站的购物车的相关功能
jq实现购物车的增删改查及金额结算
11-06
在本文中，我们将深入探讨如何使用jQuery（jq）来实现购物车功能，包括商品的添加、删除、修改、查询以及最终的金额结算。jQuery是一种广泛使用的JavaScript库，它简化了DOM操作、事件处理、动画效果和Ajax交互，...
node.js使用mongoose操作数据库实现购物车的增、删、改、查功能示例
10-15
主要介绍了node.js使用mongoose操作数据库实现购物车的增、删、改、查功能,结合实例形式详细分析了node.js使用mongoose框架操作MongoDB数据实现购物车增删改查相关技巧与使用注意事项,需要的朋友可以参考下
关于jq实现购物车增删改查及金额结算的案例源码
11-06
在本案例中，我们主要探讨如何使用jQuery（简称jq）实现购物车功能，包括商品的增加、删除、修改和查询，以及对购物车内商品的总价进行结算。jQuery是一款广泛使用的JavaScript库，它简化了DOM操作、事件处理和Ajax...
web js购物车（增删改查）
01-28
本项目"web js购物车（增删改查）"是针对初学者设计的一个实践案例，旨在帮助他们理解如何使用JavaScript实现购物车的基本功能，如添加商品、删除商品、修改商品数量以及查询购物车内商品。以下将详细介绍这些核心...
vue前端中购物车实现增删改查
08-05
通过以上步骤，我们已经用Vue2实现了购物车的基本功能，包括增、删、改、查。这只是一个基础示例，实际项目中可能需要考虑更多细节，如商品图片、库存检查、价格折扣、商品分类等。Vue2的强大在于它的灵活性和可扩展...
运用jsp实现的购物车模块
12-16
运用jsp实现的购物车模块包含添加至购物车功能，查看购物车功能，修改商品购买数量及从购物车中移除指定商品功能，清空购物车功能和收银台结账功能。
用jsp做的购物车，3层架构，实现了对购物车的增删改查操作，有注释！
09-05
用jsp做的购物车，3层架构。 实现了对购物车的增删改查操作。 有注释。
JSP购物车增删查改
12-19
JSP购物车增删查改.放入、清空、查看、返回
如何用js实现购物车页面增删改查
最新发布
luckyyulun的博客
04-03 466
如何用js实现购物车页面增删改查
html+css+js实现购物车，多选，反选，删除，计算总价。单击按钮增加和减少
m0_70932336的博客
04-03 4012
【代码】html+css+js实现购物车，多选，反选，删除，计算总价。单击按钮增加和减少。
JavaWeb购物车项目 思路&拓展&综合提升
KYA_ZXY的博客
05-15 1817
一、实现思路 购物车shop 前台 包括用户注册，登录 Html +js+jsp 考虑自动登录(cookie实现 登录页面) 进入购物页面购物(数据均来自数据库)，商品展示页面shop.jsp显示如下（大概显示效果如下，为了界面美观，可以加入相应的商品图片 ）（该页面相当于游客页面） 1.点击”加入购物车”的同时，要将数据(订单项的集合)保存到session中，再转入下图购物车页面cart.jsp（必须登录才能进）（大概效果如下）[从session中取出订单项集合] 其中商品...
案例：实现在购物车中添加商品和删除购物车中指定商品的功能
daqi1983的博客
12-11 4641
一、向购物车中添加商品 1.1.创建AddCartServlet public class AddCartServlet extends HttpServlet { public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doPost(request, response); } @SuppressWarnings(
jsp实现购物车
qq_52108058的博客
05-25 4223
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言一、案例演示二、使用步骤1.引入库2.读入数据总结 前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例可供参考 一、案例演示 二、使用步骤 1.引入库 代码如下（示例）： import numpy as np import pandas as pd import m.
react实现购物车商品增删改查功能
03-25
可以使用React的useState和useEffect hooks来实现购物车商品的增删改查功能。使用useState来存储购物车数据，然后通过各种事件来修改数据，再使用useEffect来更新购物车界面上的渲染。你可以在React文档中查找更多...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值