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各浏览器中option元素的表现差异
Apr 07 Javascript
使用js画图之饼图
Jan 12 Javascript
jQuery对指定元素中指定字符串进行替换的方法
Mar 17 Javascript
js将json格式的对象拼接成复杂的url参数方法
May 25 Javascript
基于Bootstrap的UI扩展 StyleBootstrap
Jun 17 Javascript
AngularJS 整理一些优化的小技巧
Aug 18 Javascript
Javascript实现倒计时时差效果
May 18 Javascript
Echarts基本用法_动力节点Java学院整理
Aug 11 Javascript
详解Angular调试技巧之报错404(not found)
Jan 31 Javascript
脚手架vue-cli工程webpack的作用和特点
Sep 29 Javascript
angularjs使用div模拟textarea文本框的方法
Oct 02 Javascript
如何在JavaScript中创建具有多个空格的字符串?
Feb 23 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 和 XML: 使用expat函数(三)
2006/10/09 PHP
PHP5.3的垃圾回收机制(动态存储分配方案)深入理解
2012/12/10 PHP
php实现过滤表单提交中html标签的方法
2014/10/17 PHP
yii的入口文件index.php中为什么会有这两句
2016/08/04 PHP
深入理解PHP的远程多会话调试
2017/09/21 PHP
URI、URL和URN之间的区别与联系
2006/12/20 Javascript
jQuery 获取URL参数的插件
2010/03/04 Javascript
前后台交互过程中json格式如何解析以及如何生成
2012/12/26 Javascript
jQuery中on()方法用法实例详解
2015/02/06 Javascript
js实现仿Windows风格选项卡和按钮效果实例
2015/05/13 Javascript
window.setInterval()方法的定义和用法及offsetLeft与style.left的区别
2015/11/11 Javascript
使用jQuery的load方法设计动态加载及解决被加载页面js失效问题
2017/03/01 Javascript
jQuery插件FusionCharts实现的3D柱状图效果实例【附demo源码下载】
2017/03/03 Javascript
对于input 框限定输入值为浮点型的js代码
2017/09/25 Javascript
微信小程序 动画的简单实例
2017/10/12 Javascript
详解webpack babel的配置
2018/01/09 Javascript
基于jQuery ztree实现表格风格的树状结构
2018/08/31 jQuery
vue实现搜索过滤效果
2019/05/28 Javascript
javascript+Canvas实现画板功能
2020/06/23 Javascript
记录Django开发心得
2014/07/16 Python
Python 正则表达式(转义问题)
2014/12/15 Python
解决python中用matplotlib画多幅图时出现图形部分重叠的问题
2019/07/07 Python
wxpython自定义下拉列表框过程图解
2020/02/14 Python
Python selenium爬取微博数据代码实例
2020/05/22 Python
如何用python处理excel表格
2020/06/09 Python
html5使用html2canvas实现浏览器截图的示例
2017/08/31 HTML / CSS
html5指南-5.使用web storage存储键值对的数据
2013/01/07 HTML / CSS
亚马逊巴西站:Amazon.com.br
2019/09/22 全球购物
维多利亚的秘密阿联酋官网:Victoria’s Secret阿联酋
2019/12/07 全球购物
上课迟到检讨书100字
2014/01/11 职场文书
生物制药专业求职信
2014/03/11 职场文书
给学校的建议书范文
2014/05/15 职场文书
低碳环保口号
2014/06/12 职场文书
离职证明范本
2015/06/12 职场文书
新闻发布会新闻稿
2015/07/17 职场文书
Python 实现定积分与二重定积分的操作
2021/05/26 Python