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 相关文章推荐
JQuery的Validation插件中Remote验证的中文问题
Jul 26 Javascript
javascript firefox 自动加载iframe 自动调整高宽示例
Aug 27 Javascript
浅谈JavaScript正则表达式分组匹配
Apr 10 Javascript
jquery实现点击向下展开菜单项(伸缩导航)效果
Aug 22 Javascript
解决jquery中动态新增的元素节点无法触发事件问题的两种方法
Oct 30 Javascript
jquery 遍历数组 each 方法详解
May 25 Javascript
AngularJS实现用户登录状态判断的方法(Model添加拦截过滤器,路由增加限制)
Dec 12 Javascript
Hexo已经看腻了,来手把手教你使用VuePress搭建个人博客
Apr 26 Javascript
详解Angular5 路由传参的3种方法
Apr 28 Javascript
layui 数据表格复选框实现单选功能的例子
Sep 19 Javascript
Vue-Cli项目优化操作的实现
Oct 27 Javascript
vue 父组件通过$refs获取子组件的值和方法详解
Nov 07 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
BBS(php &amp; mysql)完整版(五)
2006/10/09 PHP
解决中英文字符串长度问题函数
2007/01/16 PHP
匹配csdn用户数据库与官方用户的重合度并将重叠部分的用户筛选出来
2011/12/25 PHP
web站点获取用户IP的安全方法 HTTP_X_FORWARDED_FOR检验
2013/06/01 PHP
thinkphp实现把数据库中的列的值存到下拉框中的方法
2017/01/20 PHP
基于laravel缓冲cache的用法详解
2019/10/23 PHP
跟着Jquery API学Jquery之一 选择器
2010/04/07 Javascript
js注意img图片的onerror事件的分析
2011/01/01 Javascript
谷歌showModalDialog()方法不兼容出现对话窗口的解决办法
2016/02/15 Javascript
JQuery和html+css实现带小圆点和左右按钮的轮播图实例
2017/07/22 jQuery
AngularJS实现自定义指令及指令配置项的方法
2017/11/20 Javascript
vue实现裁切图片同时实现放大、缩小、旋转功能
2018/03/02 Javascript
element-ui中的select下拉列表设置默认值方法
2018/08/24 Javascript
详解Nodejs get获取远程服务器接口数据
2019/03/26 NodeJs
详细教你微信公众号正文页SVG交互开发技巧
2019/07/25 Javascript
angular组件间通讯的实现方法示例
2020/05/07 Javascript
Python tempfile模块学习笔记(临时文件)
2014/05/25 Python
分析在Python中何种情况下需要使用断言
2015/04/01 Python
使用Python脚本操作MongoDB的教程
2015/04/16 Python
使用Python写个小监控
2016/01/27 Python
Python简单实现子网掩码转换的方法
2016/04/13 Python
利用numpy+matplotlib绘图的基本操作教程
2017/05/03 Python
人生苦短我用python python如何快速入门?
2018/03/12 Python
python实现猜单词小游戏
2020/05/22 Python
学生信息管理系统python版
2018/10/17 Python
Python Web框架之Django框架Form组件用法详解
2019/08/16 Python
python生成requirements.txt的两种方法
2019/09/18 Python
python实现高斯判别分析算法的例子
2019/12/09 Python
英国折扣零售连锁店:QD Stores
2018/12/08 全球购物
小米乌克兰网上商店:Xiaomi.UA
2019/10/29 全球购物
护士自荐信怎么写
2013/10/18 职场文书
新年晚会主持词
2014/03/24 职场文书
2015年求职自荐信范文
2015/03/04 职场文书
红色革命电影观后感
2015/06/18 职场文书
mysql优化之query_cache_limit参数说明
2021/07/01 MySQL
Python字符串常规操作小结
2022/04/03 Python