简单购物车JS实现

本文介绍了如何利用HTML和JavaScript创建一个基本的购物车表格,包括商品编号、名称、单价、数量和小计。通过点击加减按钮动态更新商品数量,并实时计算总价。同时,文章实现了事件委托来处理按钮点击事件,确保了购物车功能的交互性。

大家好,我还是那个小白,这个国庆黄金周,我利用目前所学的一些知识,写了一个表格式的简单购物车:
HTML:

编号 名称 单价 个数 小计
JS: let dataArr = [ { num: 1, name: "可乐", price: 100, count: 1 }, { num: 2, name: "奶茶", price: 200, count: 1 }, { num: 3, name: "咖啡", price: 300, count: 1 }, { num: 4, name: "神油", price: 400, count: 1 } ];

let tbEle = document.querySelector(“tbody”);
//渲染函数
function dataRender() {
tbEle.innerHTML = “”;
let money = 0;
for (let index in dataArr) {
let newTr = document.createElement(“tr”);
newTr.innerHTML = <td>${dataArr[index].num}</td> <td>${dataArr[index].name}</td> <td>${dataArr[index].price}</td> <td> <input type="button" value="-" data-index="${index}"> <input type="text" value="${dataArr[index].count}" style="width:20px"> <input type="button" value="+"

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值