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 终止函数执行操作
Feb 14 Javascript
js多功能分页组件layPage使用方法详解
May 19 Javascript
深入理解jQuery 事件处理
Jun 14 Javascript
浅谈js基础数据类型和引用类型,深浅拷贝问题,以及内存分配问题
Sep 02 Javascript
vue父组件中获取子组件中的数据(实例讲解)
Sep 27 Javascript
详解html-webpack-plugin用法全解
Jan 22 Javascript
js的各种数据类型判断的介绍
Jan 19 Javascript
详解VSCode配置启动Vue项目
May 14 Javascript
微信小程序实现动态列表项的顺序加载动画
Jul 25 Javascript
Vue插件之滑动验证码
Sep 21 Javascript
js定时器出现第一次延迟的原因及解决方法
Jan 04 Javascript
javaScript Array api梳理
Mar 31 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二维码生成以及下载实现
2017/09/28 PHP
文本框中,回车键触发事件的js代码[多浏览器兼容]
2010/06/07 Javascript
用json方式实现在 js 中建立一个map
2014/05/02 Javascript
Javascript堆排序算法详解
2014/12/03 Javascript
使用jQuery和Bootstrap实现多层、自适应模态窗口
2014/12/22 Javascript
Bootstrap每天必学之媒体对象
2015/11/30 Javascript
详解JavaScript正则表达式之RegExp对象
2015/12/13 Javascript
Javascript实现苹果悬浮虚拟按钮
2016/04/10 Javascript
原生js仿jquery animate动画效果
2016/07/13 Javascript
利用AngularJs实现京东首页轮播图效果
2016/09/08 Javascript
Bootstrap基本插件学习笔记之Popover提示框(19)
2016/12/08 Javascript
无阻塞加载js,防止因js加载不了影响页面显示的问题
2016/12/18 Javascript
AngularJS动态菜单操作指令
2017/04/25 Javascript
vue引入jq插件的实例讲解
2017/09/12 Javascript
vue2.0模拟锚点的实例
2018/03/14 Javascript
Vue 将后台传过来的带html字段的字符串转换为 HTML
2018/03/29 Javascript
手动下载Chrome并解决puppeteer无法使用问题
2018/11/12 Javascript
vue-cli3环境变量与分环境打包的方法示例
2019/02/18 Javascript
JQuery获取元素尺寸、位置及页面滚动事件应用示例
2019/05/14 jQuery
Vue2.0实现简单分页及跳转效果
2019/07/29 Javascript
html+jQuery实现拖动滑块图片拼图验证码插件【移动端适用】
2019/09/10 jQuery
Vue使用预渲染代替SSR的方法
2020/07/02 Javascript
uni-app实现获取验证码倒计时功能
2020/11/01 Javascript
Python中.py文件打包成exe可执行文件详解
2017/03/22 Python
Django验证码的生成与使用示例
2017/05/20 Python
Pycharm远程调试openstack的方法
2017/11/21 Python
django settings.py 配置文件及介绍
2019/07/15 Python
Django之路由层的实现
2019/09/09 Python
Python Process创建进程的2种方法详解
2021/01/25 Python
Zavvi荷兰:英国大型音像制品和图书游戏零售商
2018/03/22 全球购物
在Ajax应用中信息是如何在浏览器和服务器之间传递的
2016/05/31 面试题
高中毕业生自我鉴定范文
2013/09/26 职场文书
一般党员对照检查材料
2014/09/24 职场文书
初中英语教师个人工作总结
2015/02/09 职场文书
2016教师国培研修感言
2015/12/08 职场文书
一个成功的互联网创业项目,必须满足这些要求
2019/08/23 职场文书