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 操作cookies及正确使用cookies的属性
Oct 15 Javascript
实现点击列表弹出列表索引的两种方式
Mar 08 Javascript
对jQuery的事件绑定的一些思考(补充)
Apr 20 Javascript
JavaScript实现简单的二级导航菜单实例
Apr 15 Javascript
jquery实现选中单选按钮下拉伸缩效果
Aug 06 Javascript
JS实现可点击展开与关闭的左侧广告代码
Sep 02 Javascript
js带前后翻页的图片切换效果代码分享
Sep 08 Javascript
JavaScript jQuery 中定义数组与操作及jquery数组操作
Dec 18 Javascript
JS使用JSON作为参数实例分析
Jun 23 Javascript
javascript中获取class的简单实现
Jul 12 Javascript
优化Vue项目编译文件大小的方法步骤
May 27 Javascript
Javascript中的奇葩知识,你知道吗?
Jan 25 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页面缓存ob系列函数介绍
2012/10/18 PHP
PHP实现的支付宝支付功能示例
2019/03/26 PHP
Aster vs Newbee BO5 第一场2.19
2021/03/10 DOTA
Firefox中beforeunload事件的实现缺陷浅析
2012/05/03 Javascript
为什么Node.js会这么火呢?Node.js流行的原因
2014/12/01 Javascript
JQuery控制div外点击隐藏而div内点击不会隐藏的方法
2015/01/13 Javascript
JS将滑动门改为选项卡(需鼠标点击)的实现方法
2015/09/27 Javascript
jQuery实现仿微软首页感应鼠标变化滑动窗口效果
2015/10/08 Javascript
JS实现双击屏幕滚动效果代码
2015/10/28 Javascript
JavaScript正则表达式匹配 div  style标签
2016/03/15 Javascript
JavaScript中的this使用详解
2016/07/27 Javascript
基于JavaScript实现点击页面任何位置返回
2016/08/31 Javascript
JS限制条件补全问题实例分析
2016/12/16 Javascript
Node.js Mongodb 密码特殊字符 @的解决方法
2017/04/11 Javascript
vue.js选中动态绑定的radio的指定项
2017/06/02 Javascript
webpack源码之loader机制详解
2018/04/06 Javascript
了解javascript中的Dom操作
2019/05/27 Javascript
解决layui下拉框监听问题(监听不到值的变化)
2019/09/28 Javascript
使用PreloadJS加载图片资源的基础方法详解
2020/02/03 Javascript
Python 调用DLL操作抄表机
2009/01/12 Python
python获取标准北京时间的方法
2015/03/24 Python
Python实现可获取网易页面所有文本信息的网易网络爬虫功能示例
2018/01/15 Python
基于python实现学生管理系统
2018/10/17 Python
Python类中self参数用法详解
2020/02/13 Python
廉价连衣裙和婚纱礼服在线销售:Tbdress
2019/02/28 全球购物
关于Assembly命名空间的三个面试题
2015/07/23 面试题
教师自我评价范例
2013/09/24 职场文书
自荐信如何制作?
2014/02/21 职场文书
大学生社团活动总结
2014/04/26 职场文书
公司承诺书怎么写
2014/05/24 职场文书
青年文明号汇报材料
2014/12/23 职场文书
财政局长个人总结
2015/03/04 职场文书
2015年小学校长工作总结
2015/05/19 职场文书
2016年大学光棍节活动总结
2016/04/05 职场文书
深入解析NumPy中的Broadcasting广播机制
2021/05/30 Python
React中的Context应用场景分析
2021/06/11 Javascript