当前位置： 首页 > news >正文

HTML购物车示例（勾选、删除、添加和结算功能）

news 2025/12/15 6:32:23

以下是一个简单的HTML购物车示例，包含勾选、删除、添加和结算功能。结算功能使用PHP实现，可以获取选中商品的ID。

在这里插入图片描述

以下是一个简单的HTML购物车示例，包含勾选、删除、添加和结算功能。结算功能使用PHP实现，可以获取选中商品的ID`以下是一个简单的HTML购物车示例，包含勾选、删除、添加和结算功能。结算功能使用PHP实现，可以获取选中商品的ID。

<!DOCTYPE html>
<html>
<head><link rel="stylesheet" href="css/style.css" /><title>购物车</title><style>table {border-collapse: collapse;width: 100%;}th, td {text-align: left;padding: 8px;border-bottom: 1px solid #ddd;}tr:hover {background-color: #f5f5f5;}.check {width: 20px;}.delete {color: red;cursor: pointer;}.total {font-weight: bold;text-align: right;}#checkout {margin-top: 20px;text-align: right;}</style>
</head>
<body><h1>购物车</h1><table><thead><tr><th class="check"></th><th>商品名称</th><th>价格</th><th>数量</th><th>小计</th><th class="delete"></th></tr></thead><tbody><tr class="item-row" data-id="1"><td class="check"><input type="checkbox" name="item[]" value="1"></td><td>商品1</td><td>10.00</td><td><input type="number" name="quantity[]" value="1"></td><td class="subtotal">10.00</td><td class="delete">X</td></tr><tr class="item-row" data-id="2"><td class="check"><input type="checkbox" name="item[]" value="2"></td><td>商品2</td><td>20.00</td><td><input type="number" name="quantity[]" value="1"></td><td class="subtotal">20.00</td><td class="delete">X</td></tr><tr class="item-row" data-id="3"><td class="check"><input type="checkbox" name="item[]" value="3"></td><td>商品3</td><td>30.00</td><td><input type="number" name="quantity[]" value="1"></td><td class="subtotal">30.00</td><td class="delete">X</td></tr></tbody><tfoot><tr><td colspan="4" class="total">总计：</td><td class="total" id="total">0.00</td><td></td></tr></tfoot></table><div id="checkout"><button onclick="checkout()">结算</button></div><script>// 计算小计和总计function updateSubtotal() {var rows = document.querySelectorAll('.item-row');var total = 0;for (var i = 0; i < rows.length; i++) {var row = rows[i];var price = parseFloat(row.querySelector('td:nth-child(3)').textContent);var quantity = parseInt(row.querySelector('input[name="quantity[]"]').value);var subtotal = price * quantity;row.querySelector('.subtotal').textContent = subtotal.toFixed(2);total += subtotal;}document.querySelector('#total').textContent = total.toFixed(2);}// 删除商品function deleteItem() {var row = this.parentNode;row.parentNode.removeChild(row);updateSubtotal();}// 添加商品function addItem() {var table = document.querySelector('table');var row = table.insertRow(-1);row.classList.add('item-row');row.dataset.id = Date.now(); // 生成一个随机IDrow.innerHTML = `<td class="check"><input type="checkbox" name="item[]" value="${row.dataset.id}"></td><td><input type="text" name="name[]"></td><td><input type="number" name="price[]" step="0.01"></td><td><input type="number" name="quantity[]" value="1"></td><td class="subtotal">0.00</td><td class="delete">X</td>`;row.querySelector('.delete').addEventListener('click', deleteItem);row.querySelector('input[name="quantity[]"]').addEventListener('input', updateSubtotal);row.querySelector('input[name="price[]"]').addEventListener('input', updateSubtotal);}// 结算选中的商品function checkout() {var items = document.querySelectorAll('input[name="item[]"]:checked');var ids = [];for (var i = 0; i < items.length; i++) {ids.push(items[i].value);}if (ids.length > 0) {window.location.href = 'checkout.php?ids=' + ids.join(',');} else {alert('请选择要结算的商品');}}// 绑定事件var deleteButtons = document.querySelectorAll('.delete');for (var i = 0; i < deleteButtons.length; i++) {deleteButtons[i].addEventListener('click', deleteItem);}var addBtn = document.querySelector('#add');addBtn.addEventListener('click', addItem);var quantityInputs = document.querySelectorAll('input[name="quantity[]"]');for (var i = 0; i < quantityInputs.length; i++) {quantityInputs[i].addEventListener('input', updateSubtotal);}var priceInputs = document.querySelectorAll('input[name="price[]"]');for (var i = 0; i < priceInputs.length; i++) {priceInputs[i].addEventListener('input', updateSubtotal);}</script>
</body>
</html>
`

相关文章：

HTML购物车示例（勾选、删除、添加和结算功能）

以下是一个简单的HTML购物车示例&#xff0c;包含勾选、删除、添加和结算功能。结算功能使用PHP实现&#xff0c;可以获取选中商品的ID。 以下是一个简单的HTML购物车示例&#xff0c;包含勾选、删除、添加和结算功能。结算功能使用PHP实现&#xff0c;可以获取选中商品的ID以下…...

编程日记 2023/5/15 8:34:24

MySQL原理(十)：主从架构

前言 上一篇介绍了 MySQL 的表分区和分库分表&#xff0c;这一篇将介绍主从架构相关的内容。 主从架构 常见的主从架构模式有四种&#xff1a; 一主多从架构&#xff1a;适用于读大于写的场景&#xff0c;采用多个从库来分担数据库系统的读压力。多主架构&#xff1a;适用于…...

编程日记 2023/5/15 8:29:23

一文了解Moonbeam智能合约

智能合约&#xff1a;区块链交易的基石 20世纪90年代&#xff0c;Nick Szabo首次提出智能合约的概念&#xff0c;这是一个建立在自动化、加密安全世界之上的数字化市场。在这种数字化市场中&#xff0c;交易和业务可以在无需信任的情况下进行&#xff0c;无需中间人。 以太坊…...

编程日记 2023/5/15 8:24:22

【加解密篇】利用HashCat破解RAR压缩包加密文件详细教程

【加解密篇】利用HashCat解密RAR压缩包加密文件 在取证知识里挖呀挖呀挖—【蘇小沐】 文章目录 【加解密篇】利用HashCat解密RAR压缩包加密文件1.实验环境2.RAR加密压缩包 &#xff08;一&#xff09;john软件1.使用CMD命令&#xff1a; run\rar2john.exe &#xff08;二&…...

编程日记 2023/5/31 17:01:59

React面试题汇总1

1.React的严格模式如何使用&#xff0c;有什么用处&#xff1f; React中StrictMode严格模式_react.strictmode_前端精髓的博客-CSDN博客当我们使用 npx create-react-app my-app 创建一个项目的时候。项目中有一段如下所示的代码&#xff1a;ReactDOM.render( <React.Stric…...

编程日记 2023/5/15 8:14:20

Golang每日一练(leetDay0066) 有效电话号码、转置文件

目录 193. 有效电话号码 Valid Phone Numbers &#x1f31f; 194. 转置文件 Transpose File &#x1f31f;&#x1f31f; &#x1f31f; 每日一练刷题专栏 &#x1f31f; Golang每日一练 专栏 Python每日一练 专栏 C/C每日一练 专栏 Java每日一练 专栏 193. 有效电话号…...

编程日记 2023/5/15 8:09:19

前端 之 FormData对象浅谈

一、简介 ​ 通常情况下&#xff0c;前端在使用post请求提交数据的时候&#xff0c;请求都是采用application/json 或 application/x-www-form-urlencoded编码类型&#xff0c;分别是借助JSON字符串来传递参数或者keyvalue格式字符串&#xff08;多参数通过&进行连接&…...

编程日记 2023/5/15 8:04:18

【分布式锁】Redisson分布式锁的使用（推荐使用）

文章目录 前言一、常见分布式锁方案对比二、分布式锁需满足四个条件三、什么是Redisson?官网和官方文档Redisson使用 四、Redisson 分布式重入锁用法Redisson 支持单点模式、主从模式、哨兵模式、集群模式自己先思考下,如果要手写一个分布式锁组件&#xff0c;怎么做&#xff…...

编程日记 2023/5/15 7:59:17

创建XML的三种方式（二）

文章目录 1 使用XmlDocument创建XML文档2 使用XmlTextWriter写XML文档3 使用LINQ to XML 的XDocument类4 小结 本文介绍了在winform中使用C#开发语言来创建XML文档的三种方式&#xff0c;并介绍了各自的优缺点。 方法1是使用 XmlDocument创建XML文档&#xff0c;方法2是使用 …...

编程日记 2023/5/15 7:54:16

十分钟教你搭建类似ChatGPT的安卓应用程序

大家好&#xff0c;我是易安&#xff01; Chat GPT 是当今著名的人工智能工具&#xff0c;就像聊天机器人一样。Chat GPT会回答发送给它的所有查询。今天&#xff0c;我将通过集成 OpenAI API (ChatGPT)构建一个简单的类似 ChatGPT 的 android 应用程序&#xff0c;我们可以在其…...

编程日记 2023/5/15 7:49:15

问题 E: 起止位置（C++）（二分查找）

目录 1.题目描述 2.AC 1.题目描述 问题 E: 起止位置 时间限制: 1.000 Sec 内存限制: 128 MB提交 状态 题目描述 有n位同学按照年龄从小到大排好队。 王老师想要查询&#xff0c;年龄为x的同学&#xff0c;在队伍中首次出现的位置和最后一次出现的位置&#xff1b;如果队…...

编程日记 2023/5/30 16:03:25

【sop】基于灵敏度分析的有源配电网智能软开关优化配置[升级1]（Matlab代码实现）

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…...

编程日记 2023/5/15 7:39:08

LeetCode周赛复盘（第345场周赛）

文章目录 1、找出转圈游戏输家1.1 题目链接1.2 题目描述1.3 解题代码1.4 解题思路 2、相邻值的按位异或2.1 题目链接2.2 题目描述2.3 解题代码2.4 解题思路 3、 矩阵中移动的最大次数3.1 题目链接3.2 题目描述3.3 解题代码3.4 解题思路 4、 统计完全连通分量的数量4.1 题目链接…...

编程日记 2023/5/15 7:34:06

Call for Papers丨第三届GLB@KDD‘23 Workshop

鉴于介绍新数据集和Benchmark研究往往需要不同于常规论文的评审标准&#xff0c;计算机视觉和自然语言处理领域&#xff0c;以及最近的NeurIPS会议&#xff0c;都有专门致力于建立新Benchmark数据集和任务的Conference Track。然而在图机器学习领域&#xff0c;我们还没有类似的…...

编程日记 2023/5/15 7:29:06

【多线程】单例模式

目录 饿汉模式 懒汉模式-单线程版 懒汉模式-多线程版 懒汉模式-多线程版(改进) 单例是一种设计模式。 啥是设计模式 ? 设计模式好比象棋中的 " 棋谱 ". 红方当头炮 , 黑方马来跳 . 针对红方的一些走法 , 黑方应招的时候有一些固定的套路. 按照套路来走局势…...

编程日记 2023/5/15 7:24:05

7搜索管理

7搜索管理 7.1 准备环境 7.1.1 创建映射 创建xc_course索引库。 创建如下映射 post&#xff1a;http://localhost:9200/xc_course/doc/_mapping 参考 “资料”–》搜索测试-初始化数据.txt { "properties": { "description": { "type": &…...

编程日记 2023/5/15 7:19:04

在Pytorch中使用Tensorboard

Tensorboard是一款深度学习可视化软件&#xff0c;目前主要使用了它的可视化模型, 可视化模型权重和可视化损失函数功能。 x.1 tensorboard初始化 tensorboard初始化需要导入SummaryWriter包并指定存储位置和开放端口号。 from torch.utils.tensorboard import SummaryWrite…...

编程日记 2023/5/29 16:56:16

[笔记]深入解析Windows操作系统《四》管理机制

文章目录 前言4.1注册表查看和修改注册表注册表用法注册表数据类型注册表逻辑结构HKEY_CURRENT_USERHKEY_USERS 实验&#xff1a;观察轮廓加载和卸载HKEY_CLASSES_ROOTHKEY_LOCAL_MACHINE 实验:离线方式或远程编辑BCDHKEY_CURRENT_CONFIGHKEY_PERFORMANCE_DATA 前言 本章讲述了…...

编程日记 2023/5/30 21:45:21

【小沐学Python】Python实现在线英语翻译功能

文章目录 1、简介2、在线翻译接口2.1 Google Translate API2.2 Microsoft Translator API2.2.1 开发简介2.2.2 开发费用2.2.3 开发API 2.3 百度翻译开放平台 API2.3.1 开发简介2.3.2 开发费用2.3.3 开发API 2.4 Tencent AI 开放平台的翻译 API2.4.1 开发简介2.4.2 开发API 2.5 …...

编程日记 2023/5/15 7:04:01

k8s中pod使用详解

一、前言 在之前k8s组件一篇中，我们谈到了pod这个组件，了解到pod是k8s中资源管理的最小单位，可以说Pod是整个k8s对外提供服务的最基础的个体，有必要对Pod做深入的学习和探究。 二、再看k8s架构图 为了加深对k8s中pod的理解，再来回顾下k8s的完整架构 三、pod特点 结合上面这…...

编程日记 2023/5/15 6:59:00

工业安全零事故的智能守护者：一体化AI智能安防平台

前言&#xff1a; 通过AI视觉技术&#xff0c;为船厂提供全面的安全监控解决方案&#xff0c;涵盖交通违规检测、起重机轨道安全、非法入侵检测、盗窃防范、安全规范执行监控等多个方面&#xff0c;能够实现对应负责人反馈机制&#xff0c;并最终实现数据的统计报表。提升船厂…...

编程新知 2025/12/14 7:46:59

2025年能源电力系统与流体力学国际会议 (EPSFD 2025)

2025年能源电力系统与流体力学国际会议&#xff08;EPSFD 2025&#xff09;将于本年度在美丽的杭州盛大召开。作为全球能源、电力系统以及流体力学领域的顶级盛会&#xff0c;EPSFD 2025旨在为来自世界各地的科学家、工程师和研究人员提供一个展示最新研究成果、分享实践经验及…...

编程新知 2025/12/12 19:42:17

QMC5883L的驱动

简介 本篇文章的代码已经上传到了github上面&#xff0c;开源代码 作为一个电子罗盘模块&#xff0c;我们可以通过I2C从中获取偏航角yaw&#xff0c;相对于六轴陀螺仪的yaw&#xff0c;qmc5883l几乎不会零飘并且成本较低。 参考资料 QMC5883L磁场传感器驱动 QMC5883L磁力计…...

编程新知 2025/7/21 15:40:47

【解密LSTM、GRU如何解决传统RNN梯度消失问题】

解密LSTM与GRU&#xff1a;如何让RNN变得更聪明&#xff1f; 在深度学习的世界里&#xff0c;循环神经网络&#xff08;RNN&#xff09;以其卓越的序列数据处理能力广泛应用于自然语言处理、时间序列预测等领域。然而&#xff0c;传统RNN存在的一个严重问题——梯度消失&#…...

编程新知 2025/12/14 16:14:14

《用户共鸣指数（E）驱动品牌大模型种草：如何抢占大模型搜索结果情感高地》

在注意力分散、内容高度同质化的时代&#xff0c;情感连接已成为品牌破圈的关键通道。我们在服务大量品牌客户的过程中发现&#xff0c;消费者对内容的“有感”程度&#xff0c;正日益成为影响品牌传播效率与转化率的核心变量。在生成式AI驱动的内容生成与推荐环境中&#xff0…...

编程新知 2025/12/15 4:20:03

测试markdown--肇兴

day1&#xff1a; 1、去程&#xff1a;7:04 --11:32高铁 高铁右转上售票大厅2楼&#xff0c;穿过候车厅下一楼&#xff0c;上大巴车 &#xffe5;10/人 **2、到达&#xff1a;**12点多到达寨子&#xff0c;买门票&#xff0c;美团/抖音&#xff1a;&#xffe5;78人 3、中饭&a…...

编程新知 2025/12/14 11:45:02

React19源码系列之 事件插件系统

事件类别 事件类型 定义 文档 Event Event 接口表示在 EventTarget 上出现的事件。 Event - Web API | MDN UIEvent UIEvent 接口表示简单的用户界面事件。 UIEvent - Web API | MDN KeyboardEvent KeyboardEvent 对象描述了用户与键盘的交互。 KeyboardEvent - Web…...

编程新知 2025/12/13 3:10:42

Qt Http Server模块功能及架构

Qt Http Server 是 Qt 6.0 中引入的一个新模块&#xff0c;它提供了一个轻量级的 HTTP 服务器实现&#xff0c;主要用于构建基于 HTTP 的应用程序和服务。 功能介绍&#xff1a; 主要功能 HTTP服务器功能&#xff1a; 支持 HTTP/1.1 协议 简单的请求/响应处理模型 支持 GET…...

编程新知 2025/10/17 21:16:57

selenium学习实战【Python爬虫】

selenium学习实战【Python爬虫】 文章目录 selenium学习实战【Python爬虫】一、声明二、学习目标三、安装依赖3.1 安装selenium库3.2 安装浏览器驱动3.2.1 查看Edge版本3.2.2 驱动安装 四、代码讲解4.1 配置浏览器4.2 加载更多4.3 寻找内容4.4 完整代码 五、报告文件爬取5.1 提…...

编程新知 2025/12/13 10:57:35

保姆级教程：在无网络无显卡的Windows电脑的vscode本地部署deepseek

文章目录 1 前言2 部署流程2.1 准备工作2.2 Ollama2.2.1 使用有网络的电脑下载Ollama2.2.2 安装Ollama&#xff08;有网络的电脑&#xff09;2.2.3 安装Ollama&#xff08;无网络的电脑&#xff09;2.2.4 安装验证2.2.5 修改大模型安装位置2.2.6 下载Deepseek模型 2.3 将deepse…...

编程新知 2025/12/14 23:15:45