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 相关文章推荐
JS input 数字验证代码
Jul 30 Javascript
某页码显示的helper 少量调整,另附js版
Sep 12 Javascript
javascript模拟评分控件实现方法
May 13 Javascript
jQuery左右滚动支持图片放大缩略图图片轮播代码分享
Aug 26 Javascript
学习javascript的闭包,原型,和匿名函数之旅
Oct 18 Javascript
jquery判断当前浏览器的实现代码
Nov 07 Javascript
JS回调函数简单用法示例
Feb 09 Javascript
javascript 中的继承实例详解
May 05 Javascript
使用jQuery.Pin垂直滚动时固定导航
May 24 jQuery
JS简单添加元素新节点的方法示例
Feb 10 Javascript
详解jQuery设置内容和属性
Apr 11 jQuery
AJAX学习笔记
May 18 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
php,不用COM,生成excel文件
2006/10/09 PHP
实测在class的function中include的文件中非php的global全局环境
2013/07/15 PHP
采用ThinkPHP中F方法实现快速缓存实例
2014/06/13 PHP
Laravel多用户认证系统示例详解
2018/03/13 PHP
thinkphp5 框架结合plupload实现图片批量上传功能示例
2020/04/04 PHP
通过身份证号得到出生日期和性别的js代码
2009/11/23 Javascript
用JS写的一个TableView控件代码
2010/01/23 Javascript
JQuery实现简单时尚快捷的气泡提示插件
2012/12/20 Javascript
jquery统计复选框选中示例
2013/11/05 Javascript
在页面中js获取光标/鼠标的坐标及光标的像素坐标
2013/11/11 Javascript
jQuery可见性过滤器:hidden和:visibility用法实例
2015/06/24 Javascript
20分钟成功编写bootstrap响应式页面 就这么简单
2016/05/12 Javascript
vue中Element-ui 输入银行账号每四位加一个空格的实现代码
2018/09/14 Javascript
js中arguments对象的深入理解
2019/05/14 Javascript
深入浅出了解Node.js Streams
2019/05/27 Javascript
AngularJS动态生成select下拉框的方法实例
2019/11/17 Javascript
vue 百度地图(vue-baidu-map)绘制方向箭头折线实例代码详解
2020/04/28 Javascript
jQuery+css实现的点击图片放大缩小预览功能示例【图片预览 查看大图】
2020/05/29 jQuery
Vue.extend 登录注册模态框的实现
2020/12/29 Vue.js
[01:15]PWL S2开团时刻第二期——他们杀 我就白给
2020/11/25 DOTA
python从入门到精通(DAY 1)
2015/12/20 Python
python 解决动态的定义变量名,并给其赋值的方法(大数据处理)
2018/11/10 Python
python爬取微信公众号文章的方法
2019/02/26 Python
Python实现Linux监控的方法
2019/05/16 Python
Python3如何对urllib和urllib2进行重构
2019/11/25 Python
Python3.x+迅雷x 自动下载高分电影的实现方法
2020/01/12 Python
html5 canvas绘制矩形和圆形的实例代码
2016/06/16 HTML / CSS
英国最出名高街品牌:Forever Unique
2018/02/24 全球购物
全球立体声:World Wide Stereo
2018/09/29 全球购物
如何用Python来进行查询和替换一个文本字符串
2014/01/02 面试题
就业意向书
2014/07/29 职场文书
租房协议书
2014/09/12 职场文书
2015年劳动部工作总结
2015/05/23 职场文书
高中生物教学反思
2016/02/20 职场文书
详解TS数字分隔符和更严格的类属性检查
2021/05/06 Javascript
Python Pycharm虚拟下百度飞浆PaddleX安装报错问题及处理方法(亲测100%有效)
2021/05/24 Python