购物车案例

时间  2021-01-10 标签 javascript

本案例包括DOM元素基本的增删改查操作
开始之前，我们要知道表格的常见获取行，列的操作
行：var tr=table.children[1].rows;
列：var tds=tr.cells

一、商品的选择框按钮

在这里插入图片描述

单选

单选时也需要判断一下是否全部选中，全部选中时需要勾选全选按钮
在这里插入图片描述

全选

在这里插入图片描述

二、遮罩层的控制

遮罩层的打开与隐藏

这里是给遮罩层的父元素添加show样式（不太明白为什么给遮罩层直接添加show样式不行）
在这里插入图片描述

遮罩层的取消按钮（事件委托）

在这里插入图片描述

计算总金额

注意计算总金额是每一行的小计相加，不是所有的单价相加

在这里插入图片描述

计算单行金额

在这里插入图片描述

商品的增加与减少

要记得加减完更新商品的数量和总金额喔

按钮加减

在这里插入图片描述

手动输入

需要绑定keyup函数

在这里插入图片描述

删除商品

删除单个当前选定的商品

在这里插入图片描述

批量删除

同样要记得更新总数和价格
在这里插入图片描述

联系我们 沪ICP备13005482号-10