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 相关文章推荐
用Js实现的动态增加表格示例自己写的
Oct 21 Javascript
jQuery学习笔记之jQuery.extend(),jQuery.fn.extend()分析
Jun 09 Javascript
javascript排序函数实现数字排序
Jun 26 Javascript
jQuery控制div实现随滚动条滚动效果
Jun 07 Javascript
JavaScript仿flash遮罩动画效果
Jun 15 Javascript
vue.js指令v-model使用方法
Mar 20 Javascript
JS数组去重(4种方法)
Mar 27 Javascript
node使用UEditor富文本编辑器的方法实例
Jul 11 Javascript
Javascript实现异步编程的过程
Jun 18 Javascript
详解Vue项目在其他电脑npm run dev运行报错的解决方法
Oct 29 Javascript
一个小时快速搭建微信小程序的方法步骤
Apr 15 Javascript
VueQuillEditor富文本上传图片(非base64)
Jun 03 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判断图片格式的七种方法小结
2013/06/03 PHP
兼容ie6浏览器的php下载文件代码分享
2014/07/14 PHP
Zend Framework创建自己的动作助手详解
2016/03/05 PHP
php ajax confirm 删除实例详解
2019/03/06 PHP
Laravel5.1 框架Request请求操作常见用法实例分析
2020/01/04 PHP
谷歌浏览器 insertCell与appendChild的区别
2009/02/12 Javascript
jquery ready函数源代码研究
2009/12/06 Javascript
使用jquery实现简单的ajax
2013/07/08 Javascript
JavaScript中的对象的extensible属性介绍
2014/12/30 Javascript
详解自动生成博客目录案例
2016/12/09 Javascript
Vuejs 用$emit与$on来进行兄弟组件之间的数据传输通信
2017/02/23 Javascript
Node.js对MongoDB数据库实现模糊查询的方法
2017/05/03 Javascript
angularJs中datatable实现代码
2017/06/03 Javascript
浅谈vue中数据双向绑定的实现原理
2017/09/14 Javascript
解决JavaScript layui 下拉框不显示的问题
2018/08/14 Javascript
node.js爬取中关村的在线电瓶车信息
2018/11/13 Javascript
vue-router启用history模式下的开发及非根目录部署方法
2018/12/23 Javascript
微信小程序实现多选删除列表数据功能示例
2019/01/15 Javascript
node.js使用express框架进行文件上传详解
2019/03/03 Javascript
Vue.js实现大屏数字滚动翻转效果
2019/11/29 Javascript
[01:29:31]VP VS VG Supermajor小组赛胜者组第二轮 BO3第一场 6.2
2018/06/03 DOTA
python多进程共享变量
2016/04/06 Python
django之常用命令详解
2016/06/30 Python
详解python调用cmd命令三种方法
2019/07/08 Python
使用Python opencv实现视频与图片的相互转换
2019/07/08 Python
wxPython绘图模块wxPyPlot实现数据可视化
2019/11/19 Python
python装饰器原理与用法深入详解
2019/12/19 Python
python从内存地址上加载python对象过程详解
2020/01/08 Python
pymysql 插入数据 转义处理方式
2020/03/02 Python
Python中求对数方法总结
2020/03/10 Python
用canvas实现图片滤镜效果附演示
2013/11/05 HTML / CSS
美国在线宠物用品商店:Entirely Pets
2017/01/01 全球购物
土木工程专业个人求职信
2013/12/05 职场文书
2014年社区卫生工作总结
2014/12/18 职场文书
2015年学校教研室主任工作总结
2015/07/20 职场文书
HTML5来实现本地文件读取和写入的实现方法
2021/05/25 HTML / CSS