js中的DOM模拟购物车功能


Posted in Javascript onMarch 22, 2017

效果图:

js中的DOM模拟购物车功能

代码如下:

<!DOCTYPE html>
<html>
 <head>
 <title> new document </title>
 <meta charset="utf-8">
 <style>
 table{
 border:1px solid #000;
 border-collapse:collapse;
 width:600px;
 }
 td{
 border:1px solid #000;
 text-align:center;
 }
 </style>
 </head>
 <body>
 <table>
 <thead>
 <tr>
 <td>名称</td>
 <td>单价</td>
 <td>数量</td>
 <td>小计</td>
 </tr>
 </thead>
 <tbody id="tbody">
 <tr>
 <td>iphone6</td>
 <td>4488</td>
 <td>
  <button onclick="btnClick(this)">-</button>
  <span>1</span>
  <button onclick="btnClick(this)">+</button>
 </td>
 <td>4488</td>
 </tr>
 <tr>
 <td>iphone6</td>
 <td>5288</td>
 <td>
  <button onclick="btnClick(this)">-</button>
  <span>1</span>
  <button onclick="btnClick(this)">+</button>
 </td>
 <td>5288</td>
 </tr>
 <tr>
 <td>iphone6</td>
 <td>4288</td>
 <td>
  <button onclick="btnClick(this)">-</button>
  <span>1</span>
  <button onclick="btnClick(this)">+</button>
 </td>
 <td>4288</td>
 </tr>
 </tbody>
 <tfoot>
 <td colspan="3" align="right">总计:</td>
 <td id="all_total"></td>
 </tfoot>
 </table>
 <script>
 function btnClick(btn){
 //声明 spanValue 变量,用于保存 span中的数据
 var spanValue;
 //1、更改 span 中的数据
 //1.1 判断 btn 是+还是-
 if(btn.textContent == "+"){
 //1.2 根据 btn 找到 span
 var span=btn.previousElementSibling;
 //1.3 获取 span里的数据
 spanValue=parseInt(span.textContent);
 //1.4 更新 span中的数据
 spanValue+=1;
 span.textContent=spanValue;
 }else{
 //减法操作
 var span = btn.nextElementSibling;
 //1.3 获取 span里的数据
 spanValue=parseInt(span.textContent);
 //1.4 更新 span中的数据
 if(spanValue > 1){
  spanValue-=1;
  span.textContent=spanValue;
 }
 }
 //2.计算 小计
 //2.1 先 获取 单价 元素(tdPrice)
 var tdPrice=btn.parentNode.previousElementSibling;
 //2.2 获取 单价 元素中的 数值(price)
 var price=parseInt(tdPrice.textContent);
 //2.3 计算小计(spanValue*price),保存在 total
 var total=price*spanValue;
 //2.4 获取 小计 元素(tdTotal)
 var tdTotal=btn.parentNode.nextElementSibling;
 //2.5 将 total 的值 赋值给 tdTotal元素
 tdTotal.textContent=total;
 //调用 计算总计 的函数
 calAllTotal();
 }
 /**
 * 计算总计
 */
 function calAllTotal(){
 //1、获取 id为tbody 中的所有tr
 var tbody = document.getElementById("tbody");
 var trs=tbody.getElementsByTagName("tr");
 console.log(trs);
 //2、循环遍历所有tr,找到每个tr的最后一个td
 var all_total=0;
 for(var i=0;i<trs.length;i++){
 var tr=trs[i];
 //3、累加 每个 td 的值 计算总计
 //3.1 获取 tr 中的 最后一个td
 var lastTd=tr.lastElementChild;
 var lastTdValue=parseInt(lastTd.textContent);
 all_total += lastTdValue;
 }
 //4、赋值
 document.getElementById("all_total").textContent=all_total;
 }
 //加载时调用 calAllTotal() 计算现有的总计
 calAllTotal();
 </script>
 </body>
</html>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
Javascript倒计时代码
Aug 12 Javascript
js中的前绑定和后绑定详解
Aug 01 Javascript
简单常用的幻灯片播放实现代码
Sep 25 Javascript
简单的邮箱登陆的提示效果类似于yahoo邮箱
Feb 26 Javascript
JS图片无缝、平滑滚动代码
Mar 11 Javascript
JavaScript对Cookie进行读写操作实例
Jul 25 Javascript
jquery实现的淡入淡出下拉菜单效果
Aug 25 Javascript
jquery对所有input type=text的控件赋值实现方法
Dec 02 Javascript
微信小程序开发图片拖拽实例详解
May 05 Javascript
基于JavaScript实现抽奖系统
Jan 16 Javascript
js数组常用最重要的方法
Feb 04 Javascript
javascript实现商品图片放大镜
Nov 28 Javascript
js+canvas实现动态吃豆人效果
Mar 22 #Javascript
JavaScript实现星星等级评价功能
Mar 22 #Javascript
discuz表情的JS提取方法分析
Mar 22 #Javascript
详解vue2.0组件通信各种情况总结与实例分析
Mar 22 #Javascript
JS简单封装的图片无缝滚动效果示例【测试可用】
Mar 22 #Javascript
Vue计算属性的学习笔记
Mar 22 #Javascript
Angular2实现自定义双向绑定属性
Mar 22 #Javascript
You might like
微盾PHP脚本加密专家php解密算法
2020/09/13 PHP
PHP中计算字符串相似度的函数代码
2012/12/29 PHP
php利用curl抓取新浪微博内容示例
2014/04/27 PHP
基于php的CMS中展示文章类实例分析
2015/06/18 PHP
PHP正则匹配反斜杠'\'和美元'$'的方法
2017/02/08 PHP
php获取是星期几的的一些常用姿势
2019/12/15 PHP
高性能Javascript笔记 数据的存储与访问性能优化
2012/08/02 Javascript
找出字符串中出现次数最多的字母和出现次数精简版
2012/11/07 Javascript
js实现一个链接打开两个链接地址的方法
2015/05/12 Javascript
浅析JavaScript中的对象类型Object
2016/05/26 Javascript
浅谈JavaScript中的属性:如何遍历属性
2017/09/14 Javascript
Mint UI 基于 Vue.js 移动端组件库
2017/11/07 Javascript
vue.js层叠轮播效果的实例代码
2018/11/08 Javascript
重学JS 系列:聊聊继承(推荐)
2019/04/11 Javascript
小程序:授权、登录、session_key、unionId的详解
2019/05/15 Javascript
vue 组件中使用 transition 和 transition-group实现过渡动画
2019/07/09 Javascript
解决echarts数据二次渲染不成功的问题
2020/07/20 Javascript
Vue 解决父组件跳转子路由后当前导航active样式消失问题
2020/07/21 Javascript
[02:03]风行者至宝清风环佩外观展示
2020/09/05 DOTA
[37:21]完美世界DOTA2联赛PWL S2 Inki vs Magma 第二场 11.22
2020/11/24 DOTA
Python greenlet实现原理和使用示例
2014/09/24 Python
编程语言Python的发展史
2014/09/26 Python
python 中的int()函数怎么用
2017/10/17 Python
python 通过logging写入日志到文件和控制台的实例
2018/04/28 Python
Python使用win32com模块实现数据库表结构自动生成word表格的方法
2018/07/17 Python
如何在django里上传csv文件并进行入库处理的方法
2019/01/02 Python
Python列表删除元素del、pop()和remove()的区别小结
2019/09/11 Python
Python namedtuple命名元组实现过程解析
2020/01/08 Python
瑞典廉价机票预订网站:Seat24
2018/06/19 全球购物
Hurley官方网站:扎根于海滩生活方式的全球青年文化品牌
2020/05/18 全球购物
MIKI HOUSE美国官方网上商店:日本领先的婴儿和儿童高级时装品牌
2020/06/21 全球购物
初中生物教学反思
2014/01/10 职场文书
先进德育工作者事迹材料
2014/01/24 职场文书
公务员群众路线专题民主生活会发言材料
2014/09/17 职场文书
Python爬取科目四考试题库的方法实现
2021/03/30 Python
Python 中的Sympy详细使用
2021/08/07 Python