JavaScript实现购物车基本功能


Posted in Javascript onJuly 21, 2017

JavaScript购物车最基本的功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下<!DOCTYPE html> 

<html> 
  <head> 
    <meta charset="UTF-8"> 
    <title></title> 
    <style type="text/css"> 
      table{ 
        border-collapse: collapse; 
      } 
      th{ 
        width: 80px; 
        height: 30px; 
      } 
      td{ 
        text-align: center; 
        line-height: 30px; 
      } 
    </style> 
  </head> 
  <body> 
    <div class="box"> 
      <table border="" cellspacing="" cellpadding=""> 
        <thead> 
          <th ><input type="checkbox" id="checkedAll"/>选择</th> 
          <th>商品</th> 
          <th>价格</th> 
          <th>数量</th> 
          <th>总价</th> 
          <th>操作</th> 
        </thead> 
        <tbody id="tb"> 
          <tr> 
            <td><input type="checkbox" /></td> 
            <td>黄焖鸡米饭1</td> 
            <td>10</td> 
            <td> 
              <span class="jian">-</span> 
              <input type="text" style="width: 30px;text-align: center;" value="1" readonly="readonly"/> 
              <span class="jia">+</span> 
            </td> 
            <td> 
              <span style="color: red;">10</span> 
            </td> 
            <td> 
              <a style="cursor: pointer;">删除</a> 
            </td> 
          </tr> 
          <tr> 
            <td><input type="checkbox" /></td> 
            <td>黄焖鸡米饭2</td> 
            <td>20</td> 
            <td> 
              <span class="jian">-</span> 
              <input type="text" style="width: 30px;text-align: center;"value="1" readonly="readonly"/> 
              <span class="jia">+</span> 
            </td> 
            <td> 
              <span style="color: red;">20</span> 
            </td> 
            <td> 
              <a style="cursor: pointer;">删除</a> 
            </td> 
          </tr> 
        </tbody> 
      </table> 
    </div> 
  </body> 
  <script> 
    window.onload=function(){ 
      var checkedAll=document.getElementById("checkedAll") 
      var tb=document.getElementById("tb") 
      var oinput=tb.getElementsByTagName('input') 
      var jian=document.getElementsByClassName('jian') 
      var jia=document.getElementsByClassName('jia') 
      var shanchu=tb.getElementsByTagName('a') 
      console.log(shanchu) 
       
      //全选 
      checkedAll.onclick=function(){ 
        for(var i=0;i<oinput.length;i++){ 
          oinput[i].checked=this.checked 
        } 
      } 
      //当下级有一个没有选中时那么全选按钮则为false状态 
      for(var i=0;i<oinput.length;i++){ 
        oinput[i].onclick=function(){ 
          var qx=true 
          for(var i=0;i<oinput.length;i++){ 
            if(oinput[i].checked==false){ 
              qx=false 
            } 
          } 
          checkedAll.checked=qx 
           
        } 
      } 
      checkedAll.onclick=function(){ 
        for(var i=0;i<oinput.length;i++){ 
          oinput[i].checked=this.checked 
        } 
    } 
 
    for(var i=0;i<oinput.length;i++){ 
      oinput[i].onclick=function(){ 
        var qx = true; 
        for(i=0;i<oinput.length;i++){ 
            if(oinput[i].checked==false){ 
              qx=false 
            } 
          } 
          checkedAll.checked=qx 
         
      } 
    } 
   
      //加 
      for(var i=0;i<jia.length;i++){ 
        jia[i].onclick=function(){ 
          //previousSibling上一个兄弟节点  
          var val = parseInt(this.previousSibling.previousSibling.value); 
          this.previousSibling.previousSibling.value = val + 1; 
          jisuan(this) 
        } 
         
      } 
      //减 
      for(var i=0;i<jian.length;i++){ 
        jian[i].onclick=function(){ 
          //nextSibling下一个兄弟节点 
          var val = parseInt(this.nextSibling.nextSibling.value); 
          if(val > 1) { 
            this.nextSibling.nextSibling.value = val - 1; 
          } 
          jisuan(this) 
        } 
      } 
      //操作删除 
       
      for(var i=0;i<shanchu.length;i++){ 
        shanchu[i].onclick=function(){ 
          var conf = confirm('确定删除这件商品吗?'); 
          //parentNode父节点 
          console.log(this.parentNode.parentNode) 
          if(conf) { 
          //removeChild 删除节点  
            tb.removeChild(this.parentNode.parentNode);  
          } 
        } 
      } 
       
      //总价 
      function jisuan(t){ 
        var tr=t.parentNode.parentNode  
        var result=document.getElementById("result") 
          var td=tr.getElementsByTagName('td') 
          td[4].getElementsByTagName('span')[0].innerHTML = parseInt(td[2].innerHTML)*parseInt(t.parentNode.getElementsByTagName('input')[0].value) 
      } 
    } 
  </script> 
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
window.onbeforeunload方法在IE下无法正常工作的解决办法
Jan 23 Javascript
EasyUI 中 MenuButton 的使用方法
Jul 14 Javascript
window.location的重写及判断location是否被重写
Sep 04 Javascript
JavaScript中的无阻塞加载性能优化方案
Oct 10 Javascript
Jquery获取radio选中的值
May 05 jQuery
vue.js中v-on:textInput无法执行事件问题的解决过程
Jul 12 Javascript
Node.js使用Express.Router的方法
Nov 14 Javascript
解决Vue axios post请求,后台获取不到数据的问题方法
Aug 11 Javascript
Vue实现本地购物车功能
Dec 05 Javascript
vue cli使用融云实现聊天功能的实例代码
Apr 19 Javascript
微信小程序自定义底部弹出框动画
Nov 18 Javascript
微信小程序APP页面的之间的相互传递参数以及自定义组件
Apr 19 Javascript
解决html input验证只能输入数字,不能输入其他的问题
Jul 21 #Javascript
js案例之鼠标跟随jquery版(实例讲解)
Jul 21 #jQuery
基于input框覆盖掉数字英文的实例讲解
Jul 21 #Javascript
浅谈通过JS拦截 pushState和replaceState事件
Jul 21 #Javascript
用Vue-cli搭建的项目中引入css报错的原因分析
Jul 20 #Javascript
Bootstrap滚动监听组件scrollspy.js使用方法详解
Jul 20 #Javascript
微信小程序获取微信运动步数的实例代码
Jul 20 #Javascript
You might like
使用php4加速网络传输
2006/10/09 PHP
浅谈php中mysql与mysqli的区别分析
2013/06/10 PHP
thinkPHP实现MemCache分布式缓存功能
2016/03/23 PHP
thinkPHP数据查询常用方法总结【select,find,getField,query】
2017/03/15 PHP
PHP利用百度ai实现文本和图片审核
2019/05/08 PHP
Laravel 读取 config 下的数据方法
2019/10/13 PHP
浅析js中2个等号与3个等号的区别
2013/08/06 Javascript
JavaScript代码简单实现求杨辉三角给定行的最大值
2013/10/29 Javascript
JavaScript 事件绑定及深入
2015/04/13 Javascript
jQuery实现的类似淘宝网站搜索框样式代码分享
2015/08/24 Javascript
基于jQuery实现Ajax验证用户名是否存在实例
2016/03/30 Javascript
利用jQuery来动态为属性添加或者删除属性的简单方法
2016/12/02 Javascript
Angularjs中ng-repeat-start与ng-repeat-end的用法实例介绍
2016/12/31 Javascript
node vue项目开发之前后端分离实战记录
2017/12/13 Javascript
Bootstrap treeview实现动态加载数据并添加快捷搜索功能
2018/01/07 Javascript
[原创]jQuery实现合并/追加数组并去除重复项的方法
2018/04/11 jQuery
React 组件间的通信示例
2018/06/14 Javascript
微信小程序 SOTER 生物认证DEMO 指纹识别功能
2019/12/13 Javascript
vscode中Vue别名路径提示的实现
2020/07/31 Javascript
python 使用get_argument获取url query参数
2017/04/28 Python
Python实现删除列表中满足一定条件的元素示例
2017/06/12 Python
Python实现的建造者模式示例
2018/08/06 Python
Python字符串逆序的实现方法【一题多解】
2019/02/18 Python
使用OpCode绕过Python沙箱的方法详解
2019/09/03 Python
python绘制规则网络图形实例
2019/12/09 Python
Python预测2020高考分数和录取情况
2020/07/08 Python
使用CSS3来实现滚动视差效果的教程
2015/08/24 HTML / CSS
html5拍照功能实现代码(htm5上传文件)
2013/12/11 HTML / CSS
HTML5 新表单类型示例代码
2018/03/20 HTML / CSS
J.Crew官网:美国知名休闲服装品牌
2017/05/19 全球购物
波兰在线运动商店:YesSport
2020/07/23 全球购物
纪律教育月活动总结
2014/08/26 职场文书
学校开学标语
2014/10/06 职场文书
2015年工程师工作总结
2015/04/30 职场文书
员工离职证明范本
2015/06/12 职场文书
字典算法实现及操作 --python(实用)
2021/03/31 Python