js纯操作dom版购物车（实现购物车功能）

代码：

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>tr {display: block;border-bottom: 1px dotted #dcdcdc;}td {width: 100px;text-align: center;}img {width: 80px;height: 80px;}input {width: 30px;text-align: center;}.bottom {width: 640px;height: 80px;line-height: 80px;margin-top: 10px;border: 1px solid #dcdcdc;}.qjs {width: 80px;height: 50px;background-color: red;color: white;font-size: 16px;border: 0;margin-left: 15px;}.jq::after {content: "￥";}.xj::after {content: "￥";}.del {cursor: pointer;}.del:hover{color: red;}.alldel {padding-left: 16px;cursor: pointer;}.red {color: red;}.alldel:hover {color: red;}.qlc {cursor: pointer;}.qlc:hover {color: red;}.trtop{height: 40px;}.spzj{margin-left: 95px;}</style></head><body><table class="tabzong"><tr class="trtop"><td><input type="checkbox" class="allchecked" />全选</td><td>商品</td><td>单价</td><td>商品数量</td><td>小计</td><td>操作</td></tr><tr><td><input type="checkbox" class="dx" /></td><td><imgsrc="https://img.alicdn.com/i2/2204920870409/O1CN01mobmIm1EtMniYVU0J_!!2204920870409.jpg"alt=""/></td><td class="jq">5</td><td><button class="jian" disabled>-</button><input type="text" value="1" /><button class="jia">+</button></td><td class="xj">5</td><td class="del">删除</td></tr><tr><td><input type="checkbox" class="dx" /></td><td><imgsrc="https://imgservice.suning.cn/uimg1/b2c/image/gKRneKhFHGnB1oh0Imoxcg.jpg_800w_800h_4e"alt=""/></td><td class="jq">3</td><td><button class="jian" disabled>-</button><input type="text" value="1" /><button class="jia">+</button></td><td class="xj">3</td><td class="del">删除</td></tr><tr><td><input type="checkbox" class="dx" /></td><td><imgsrc="https://imgservice.suning.cn/uimg1/b2c/image/ZzNpZsy4U3v8WgTbKqfN3A.jpg_800w_800h_4e"alt=""/></td><td class="jq">10</td><td><button class="jian" disabled>-</button><input type="text" value="1" /><button class="jia">+</button></td><td class="xj">10</td><td class="del">删除</td></tr><tr><td><input type="checkbox" class="dx" /></td><td><imgsrc="https://img2.baidu.com/it/u=4280167200,1529131522&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1066"alt=""/></td><td class="jq">20</td><td><button class="jian" disabled>-</button><input type="text" value="1" /><button class="jia">+</button></td><td class="xj">20</td><td class="del">删除</td></tr></table><div class="bottom"><span style="margin-right: 30px" class="alldel">删除所选商品</span><span class="qlc">清理购物车</span><span class="spzj">已经选中<span class="red">0</span>件商品总价:<span class="red">0￥</span></span><button class="qjs">去结算</button></div></body><script>// 第二种方式let body = document.body;let qlc = document.querySelector(".qlc");qlc.onclick = function () {body.innerHTML = `<table class="tabzong"><tr><td><input type="checkbox" class="allchecked">全选</td><td>商品</td><td>单价</td><td>商品数量</td><td>小计</td><td>操作</td></tr><tr><td><input type="checkbox" class="dx"></td><td><img src="https://img.alicdn.com/i2/2204920870409/O1CN01mobmIm1EtMniYVU0J_!!2204920870409.jpg" alt=""></td><td class="jq">5</td><td><button class="jian" disabled>-</button><input type="text" value="1"><button class="jia">+</button></td><td class="xj">5</td><td class="del">删除</td></tr><tr><td><input type="checkbox" class="dx"></td><td><img src="https://imgservice.suning.cn/uimg1/b2c/image/gKRneKhFHGnB1oh0Imoxcg.jpg_800w_800h_4e" alt=""></td><td class="jq">3</td><td><button class="jian" disabled>-</button><input type="text" value="1"><button class="jia">+</button></td><td class="xj">3</td><td class="del">删除</td></tr><tr><td><input type="checkbox" class="dx"></td><td><img src="https://imgservice.suning.cn/uimg1/b2c/image/ZzNpZsy4U3v8WgTbKqfN3A.jpg_800w_800h_4e" alt=""></td><td class="jq">10</td><td><button class="jian" disabled>-</button><input type="text" value="1"><button class="jia">+</button></td><td class="xj">10</td><td class="del">删除</td></tr><tr><td><input type="checkbox" class="dx"></td><td><img src="https://img2.baidu.com/it/u=4280167200,1529131522&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1066" alt=""></td><td class="jq">20</td><td><button class="jian" disabled>-</button><input type="text" value="1"><button class="jia">+</button></td><td class="xj">20</td><td class="del">删除</td></tr></table><div class="bottom"><span style="margin-right: 30px;" class="alldel">删除所选商品</span><span class="qlc">清理购物车</span><span style="margin-left: 110px;" class="spzj">已经选中<span class="red">0</span>件商品总价: <span class="red">0￥</span></span><button class="qjs">去结算</button></div>`;z();};z();function z() {let body = document.body;let qlc = document.querySelector(".qlc");qlc.onclick = function () {body.innerHTML = `<table class="tabzong"><tr><td><input type="checkbox" class="allchecked">全选</td><td>商品</td><td>单价</td><td>商品数量</td><td>小计</td><td>操作</td></tr><tr><td><input type="checkbox" class="dx"></td><td><img src="https://img.alicdn.com/i2/2204920870409/O1CN01mobmIm1EtMniYVU0J_!!2204920870409.jpg" alt=""></td><td class="jq">5</td><td><button class="jian" disabled>-</button><input type="text" value="1"><button class="jia">+</button></td><td class="xj">5</td><td class="del">删除</td></tr><tr><td><input type="checkbox" class="dx"></td><td><img src="https://imgservice.suning.cn/uimg1/b2c/image/gKRneKhFHGnB1oh0Imoxcg.jpg_800w_800h_4e" alt=""></td><td class="jq">3</td><td><button class="jian" disabled>-</button><input type="text" value="1"><button class="jia">+</button></td><td class="xj">3</td><td class="del">删除</td></tr><tr><td><input type="checkbox" class="dx"></td><td><img src="https://imgservice.suning.cn/uimg1/b2c/image/ZzNpZsy4U3v8WgTbKqfN3A.jpg_800w_800h_4e" alt=""></td><td class="jq">10</td><td><button class="jian" disabled>-</button><input type="text" value="1"><button class="jia">+</button></td><td class="xj">10</td><td class="del">删除</td></tr><tr><td><input type="checkbox" class="dx"></td><td><img src="https://img2.baidu.com/it/u=4280167200,1529131522&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1066" alt=""></td><td class="jq">20</td><td><button class="jian" disabled>-</button><input type="text" value="1"><button class="jia">+</button></td><td class="xj">20</td><td class="del">删除</td></tr></table><div class="bottom"><span style="margin-right: 30px;" class="alldel">删除所选商品</span><span class="qlc">清理购物车</span><span style="margin-left: 110px;" class="spzj">已经选中<span class="red">0</span>件商品总价: <span class="red">0￥</span></span><button class="qjs">去结算</button></div>`;z();};let dx = document.querySelectorAll(".dx");let allchecked = document.querySelector(".allchecked");// 小计let xj = document.querySelectorAll(".xj");// 商品总价let spzj = document.querySelector(".spzj");allchecked.onclick = function () {dx.forEach((item) => {item.checked = allchecked.checked;if (item.checked) {         item.parentNode.parentNode.style.background='#eeeeee'} else {item.parentNode.parentNode.style.background='white'}});if(allchecked.checked){x=dx.length}else{x=0}add();};// 总价let zongjia = 0;// 商品数量let x = 0;dx.forEach((item) => {item.onclick = function () {if (item.checked) {x++;zongjia +=+item.parentNode.nextElementSibling.nextElementSibling.nextElementSibling.nextElementSibling.innerText;item.parentNode.parentNode.style.background='#eeeeee'} else {x--;zongjia -=+item.parentNode.nextElementSibling.nextElementSibling.nextElementSibling.nextElementSibling.innerText;item.parentNode.parentNode.style.background='white'}spzj.innerHTML = `已经选中<span class="red">${x}</span>件商品总价: <span class="red">${zongjia}￥</span></span>`;//   单选控制全选let alltype = true;dx.forEach((dxitem) => {if (!dxitem.checked) {alltype = false;}});allchecked.checked = alltype;};});// 总价函数function add() {zongjia = 0;let dx = document.querySelectorAll(".dx");x=0dx.forEach((item) => {if (item.checked) {x++zongjia +=+item.parentNode.nextElementSibling.nextElementSibling.nextElementSibling.nextElementSibling.innerText;}});spzj.innerHTML = `已经选中<span class="red">${x}</span>件商品总价: <span class="red">${zongjia}￥</span></span>`;}// 清理购物车// 第一种方式// let qlc = document.querySelector('.qlc')// qlc.onclick=function(){//     location.reload();// }// 第二种方式let jian = document.querySelectorAll(".jian");let jia = document.querySelectorAll(".jia");jian.forEach((item) => {item.onclick = function () {if (--item.nextElementSibling.value > 1) {item.parentNode.nextElementSibling.innerText =item.nextElementSibling.value *item.parentNode.previousElementSibling.innerText;add();} else {item.parentNode.nextElementSibling.innerText =item.nextElementSibling.value *item.parentNode.previousElementSibling.innerText;item.disabled = true;add();}};});jia.forEach((item) => {item.onclick = function () {if (+item.previousElementSibling.value == 5) {alert("最多只能买5件");} else {item.previousElementSibling.value++;item.parentNode.nextElementSibling.innerText =item.previousElementSibling.value *item.parentNode.previousElementSibling.innerText;console.log(item.parentNode.nextElementSibling.innerText);item.previousElementSibling.previousElementSibling.disabled = false;add();}};});// 删除let del = document.querySelectorAll(".del");del.forEach((item) => {item.onclick = function () {item.parentNode.remove();add();};});// 删除所选let alldel = document.querySelector(".alldel");alldel.onclick = function () {dx.forEach((dxitem) => {if (dxitem.checked) {dxitem.parentNode.parentNode.remove();}});add();};}</script>
</html>

效果图：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/458029.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Linux 进程间通信_匿名管道

Linux 进程间通信_匿名管道

1.程间通信目的 : 数据传输&#xff1a;一个进程需要将它的数据发送给另一个进程 资源共享&#xff1a;多个进程之间共享同样的资源。 通知事件&#xff1a;一个进程需要向另一个或一组进程发送消息&#xff0c;通知它&#xff08;它们&#xff09;发生了某种事件&#xff08;如…
阅读更多...
vue3+vite 部署npm 包

vue3+vite 部署npm 包

公司需要所以研究了一下怎么部署安装&#xff0c;比较简单 先下载个vue项目 用vue脚手架安装vue3项目 删掉App.vue 中的其它组件 npm create vuelatest 开始写自定义组件 新建一个el-text 组件, name是重点&#xff0c;vue3中也得这么导出name属性 <script> export de…
阅读更多...
JAVA-----线程池

JAVA-----线程池

目录 1.简单理解一下线程池 2.线程池参数 3.Executors ​​​​​​​ ​​​​​​​ ​​​​​​​ ​​​​​​​ ​​​​​​​ 1.简单理解一下线程池 线程池&#xff0c;就是用来存储线程的&#xff0c;然后如果有任务传进线程池…
阅读更多...
PortQry下载安装使用教程（超详细），Windows测试UDP端口

PortQry下载安装使用教程（超详细），Windows测试UDP端口

《网络安全自学教程》 PortQry是微软官方提供的一款TCP/IP连接「排障工具」&#xff0c;用来「检查」TCP/UDP「端口状态」。 平时检查端口状态&#xff0c;最常用的是telnet&#xff0c;但它是基于TCP协议的&#xff0c;无法检测「UDP端口」&#xff0c;这篇文章教大家如何在W…
阅读更多...
Flink-cdc Schema Evolution 详解

Flink-cdc Schema Evolution 详解

Flink-cdc Schema Evolution 详解 github原文 glimpse flink-cdc-3 glimpse 源码基于 ~/project/flink_src/flink-cdc master !4 ❯ git remote -v origin https://github.com/apache/flink-cdc.git (fetch) origin https://github.com/apache/flink-cdc.git (push) ~/p…
阅读更多...
介绍一款Java开发的企业接口管理系统和开放平台

介绍一款Java开发的企业接口管理系统和开放平台

介绍一款Java开发的企业接口管理系统和开放平台&#xff0c;YesApi接口管理平台Java版本。该系统基于Java开发&#xff0c;可以帮助企业进行统一接口管理、API接口开放&#xff0c;以及用于PaaS系统和SaaS产品平台的快速二次开发和搭建。 一、系统概述 YesApi接口大师&#x…
阅读更多...
ClickHouse 5节点集群安装

ClickHouse 5节点集群安装

ClickHouse 5节点集群安装 在此架构中&#xff0c;配置了五台服务器。其中两个用于托管数据副本。其他三台服务器用于协调数据的复制。在此示例中&#xff0c;我们将创建一个数据库和表&#xff0c;将使用 ReplicatedMergeTree 表引擎在两个数据节点之间复制该数据库和表。 官…
阅读更多...
RHCE作业二

RHCE作业二

1.要求&#xff1a; 配置nginx服务通过ip访问多网站 2. 1关闭防火墙 2创建ip 3配置 4创建文件 5测试
阅读更多...
logback 如何将日志输出到文件

logback 如何将日志输出到文件

如何作 将日志输出到文件需要使用 RollingFileAppender&#xff0c;该 Appender 必须定义 rollingPolicy &#xff0c;另外 rollingPollicy 下必须定义 fileNamePattern 和 encoder <appender name"fileAppender" class"ch.qos.logback.core.rolling.Rollin…
阅读更多...
二、Spring的执行流程

二、Spring的执行流程

文章目录 1. spring的初始化过程1.1 ClassPathXmlApplicationContext的构造方法1.2 refresh方法&#xff08;核心流程&#xff09;1.2.1 prepareRefresh() 方法1.2.2 obtainFreshBeanFactory() 方法1.2.3 prepareBeanFactory() 方法1.2.4 invokeBeanFactoryPostProcessors() 方…
阅读更多...
shodan2---清风

shodan2---清风

注&#xff1a;本文章源于泷羽SEC&#xff0c;如有侵权请联系我&#xff0c;违规必删 学习请认准泷羽SEC学习视频:https://space.bilibili.com/350329294 实验一&#xff1a;search 存在CVE-2019-0708的网络设备 CVE - 2019 - 0708**漏洞&#xff1a;** 该漏洞存在于远程桌面…
阅读更多...
解读数字化转型的敏捷架构：从理论到实践的深度分析

解读数字化转型的敏捷架构：从理论到实践的深度分析

在当今数字经济的推动下&#xff0c;企业要在瞬息万变的市场中保持竞争力&#xff0c;数字化转型已经不再是一种选择&#xff0c;而是不可避免的战略需求。然而&#xff0c;企业如何从理论到实践进行有效的转型&#xff0c;尤其是在复杂的技术环境中&#xff0c;如何通过正确的…
阅读更多...
来源爬虫程序调研报告

来源爬虫程序调研报告

来源爬虫程序调研报告 一、什么是爬虫 爬虫&#xff1a;就是抓取网页数据的程序。从网站某一个页面&#xff08;通常是首页&#xff09;开始&#xff0c;读取网页的内容&#xff0c;找到在网页中的其它链接地址&#xff0c;然后通过这些链接地址寻找下一个网页&#xff0c;这…
阅读更多...
中小型门诊管理系统源码，云诊所管理系统源码，前端技术栈：Vue 2 , Vite , Vue Router 3

中小型门诊管理系统源码，云诊所管理系统源码，前端技术栈：Vue 2 , Vite , Vue Router 3

中小型门诊管理系统源码&#xff0c;云诊所管理系统源码&#xff0c; 前端技术栈&#xff1a;Vue 2 Vite Vue Router 3 Vuex 3 Element Plus Axios TypeScript Quill Election 后端技术栈&#xff1a;Spring Boot MyBatis MyBatis-Plus Spring Security Swagger2 …
阅读更多...
使用Python计算相对强弱指数（RSI）进阶

使用Python计算相对强弱指数（RSI）进阶

使用Python计算相对强弱指数&#xff08;RSI&#xff09;进阶 废话不多说&#xff0c;直接上主题&#xff1a;> 代码实现 以下是实现RSI计算的完整代码&#xff1a; # 创建一个DataFramedata {DATE: date_list, # 日期CLOSE: close_px_list, # 收盘价格 }df pd.DataF…
阅读更多...
基于丑萌气质狗--C#的sqlserver学习

基于丑萌气质狗--C#的sqlserver学习

#region 常用取值 查询List<string> isName new List<string> { "第一", "第二", "第三", "第四" }; List<string> result isName.Where(m > m "第三").ToList();MyDBContext myDBnew MyDBContext(…
阅读更多...
【数据分享】中国汽车市场年鉴（2013-2023)

【数据分享】中国汽车市场年鉴（2013-2023)

数据介绍 在这十年里&#xff0c;中国自主品牌汽车迅速崛起。吉利、长城、比亚迪等品牌不断推出具有竞争力的车型&#xff0c;在国内市场乃至全球市场都占据了一席之地。同时&#xff0c;新能源汽车的发展更是如日中天。随着环保意识的提高和政策的大力支持&#xff0c;电动汽车…
阅读更多...
CSS伪元素以及伪类和CSS特性

CSS伪元素以及伪类和CSS特性

伪元素&#xff1a;可以理解为假标签。 有2个伪元素 &#xff08;1&#xff09;::before &#xff08;2&#xff09;::after ::before <!DOCTYPE html> <html> <head><title></title><style type"text/css">body::before{con…
阅读更多...
Android简单控件实现简易计算器

Android简单控件实现简易计算器

学了一些Android的简单控件&#xff0c;用这些布局和控件&#xff0c;设计并实现一个简单计算器。 计算器的界面分为两大部分&#xff0c;第一部分是上方的计算表达式&#xff0c;既包括用户的按键输入&#xff0c;也包括计算结果 数字&#xff1b;第二部分是下方的各个按键&a…
阅读更多...
【redis】初识非关系型数据库——redis

【redis】初识非关系型数据库——redis

W...Y的主页 &#x1f60a; 代码仓库分享&#x1f495; 初识 Redis Redis是⼀种基于键值对&#xff08;key-value&#xff09;的NoSQL数据库&#xff0c;与很多键值对数据库不同的是&#xff0c;Redis 中的值可以是由string&#xff08;字符串&#xff09;、hash&#xff0…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023