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>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！

赞 (0)

相关推荐

  • js实现简单的购物车有图有代码

    js实现简单的购物车有图有代码

    如图:  全选按钮的实现为: 复制代码 代码如下: <input type="checkbox" name="all" onclick="checkAll()" />全选<br /> <input type="checkbox" name="item" value="3000" />笔记本电脑:3000元<br /> <input t

  • 利用Angularjs和bootstrap实现购物车功能

    利用Angularjs和bootstrap实现购物车功能

    先来看看效果图: 购物车 一.代码 如果看了这个效果有兴趣想知道怎么做出来的话,那就继续往下看吧.话不多少,直接上代码. html代码: <!DOCTYPE html> <html lang="en" ng-app="cart"> <head> <meta charset="UTF-8"> <title>购物车</title> <link rel="style

  • js购物车实现思路及代码(个人感觉不错)

    复制代码 代码如下: <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServer

  • 基于Vuejs实现购物车功能

    本文实例为大家分享了Vuejs购物车实现代码,供大家参考,具体内容如下 html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>我的vue购物车</title> <link rel="stylesheet" href="css/bootstrap.min.css&q

  • 原生js模拟淘宝购物车项目实战

    原生js模拟淘宝购物车项目实战

    本文实例讲述了原生js模拟淘宝购物车实现代码.分享给大家供大家参考.具体如下: 通过JavaScript实现类似与淘宝的购物车效果,包括商品的单选.全选.删除.修改数量.价格计算.数目计算.预览等功能的实现.实现的效果图: 相应的代码: shoppingCart.html <!DOCTYPE html> <html> <head> <meta charset = "UTF-8"> <title>JavaScript实现购物车项

  • JavaScript编写一个简易购物车功能

    JavaScript编写一个简易购物车功能

    网上关于购物车实现的代码非常多,今天看了一些知识点,决定自己动手写写,于是写了一个简易购物车,接下来讲解一下具体的实现. 1.用html实现内容: 2.用css修饰外观: 3.用js(jq)设计动效. 第一步:首先是进行html页面的设计,我用一个大的div将所有商品包含,然后用不同的div将不同的商品进行封装,商品列表中我用了ul li实现,具体实现代码如下(代码中涉及到的商品都是网上随便copy的,不具有参考价值): <div id="goods"> <div c

  • Javascript操纵Cookie实现购物车程序

    复制代码 代码如下: /***************************************************************************************************** Name 购物车 Version 1.1 Author Vanni(凡林) url:www.27sea.com QQ:303590170 CreateDate 2005-05-31 Description 此类是基于JavaScript和客户端Cookie,请保证客户端开

  • js+cookies实现悬浮购物车的方法

    本文实例讲述了js+cookies实现悬浮购物车的方法.分享给大家供大家参考.具体分析如下: 在 "商品列表展示页"做上 "悬浮的"与"DataList"结合的 "无刷新购物车",只需计算出总价,不必去单独页面结算.找了些资料修改了一下,整理示例如下: gwc.js文件如下: // JavaScript Document //计算单个小计 function EveryCount() { var index=window.eve

  • 简单的前端js+ajax 购物车框架(入门篇)

    今天在公司实在没有事做,突然就想到写下商城的购物车的前端框架,当然我这里只有购物车的增删改查,也许写的并不是那么完善,但最重要的是一个入门,也希望js达人给些建议,好让我更上一个台阶. HOHO~~~开始咯: Js: 复制代码 代码如下: //为了省事,就没写自己的js ajax了 用了jquery的,当然你也可以添加到jquery的扩展方法内,哈哈,我太懒了,所以就写这里了. var _$ = { AJAX: function (urlparm, d, beforecall, successc

  • js中的DOM模拟购物车功能

    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; tex

  • 学习JS中的DOM节点以及操作

    DOM操作在JS中可以说是非常常见了吧,很多网页的小功能的实现,比如一些元素的增删操作等都可以用JS来实现.那么在DOM中我们需要知道些什么才能完成一些功能的实现呢?今天这篇文章就先简单的带大家入一下JS中DOM操作的门吧!! 一.DOM树的节点 1. DOM节点分为三大类: 元素节点(标签节点).属性节点和文本节点. 属性节点和文本节点都属于元素节点的子节点. 因此操作时,需先选中元素节点,再修改属性和文本. [查看元素节点] 1. 使用getElement系列方法: 具体的HTML代码如下图

  • JS中call()和apply()的功能及用法实例分析

    本文实例讲述了JS中call()和apply()的功能及用法.分享给大家供大家参考,具体如下: 1.call()和apply()的作用 首先引出问题:用call()和apply()的目的是什么? 来看个例子,在javascript OOP中,我们经常会这样定义: function cat(){ } cat.prototype={ food:"fish", say: function(){ alert("I love "+this.food); } } var bla

  • JS+HTML5实现的前端购物车功能插件实例【附demo源码下载】

    JS+HTML5实现的前端购物车功能插件实例【附demo源码下载】

    本文实例讲述了JS+HTML5实现的前端购物车功能插件.分享给大家供大家参考,具体如下: 最近做一个商城,需要用到一个简答的购物车功能,当然,后端实现比较容易,,这里重点还是讲一下前端的JS插件. 从源代码里面没看出来,它叫啥,好像叫:ctshop .js,不管啦,反正我提供下载就好,我做了一些简单的修复,支持了中文 这个插件使用了HTML5的新特效:storage ,就是游览器数据库的功能,这跟之前把数据存在cookies里面原理是相识的,这样的好处在于用户刷新页面,数据还在,,又不需要跟后端

  • JS中获取 DOM 元素的绝对位置实例详解

    在操作页面滚动和动画时经常会获取 DOM 元素的绝对位置,例如 本文 左侧的悬浮导航,当页面滚动到它以前会正常地渲染到文档流中,当页面滚动超过了它的位置,就会始终悬浮在左侧. 本文会详述各种获取 DOM 元素绝对位置 的方法以及对应的兼容性.关于如何获取 DOM 元素高度和滚动高度,请参考视口的宽高与滚动高度 一文. 概述 这些是本文涉及的 API 对应的文档和标准,供查阅: API 用途 文档 标准 offsetTop 相对定位容器的位置 MDN CSSOM View Module clien

  • 原生js模拟购物车功能

    使用html配合原生js实现购物车功能,供大家参考,具体内容如下 * 实现购物车商品数量的加减,注意数量最少为1,数量输入仅能为数字* 实现购物车商品的移除* 可以在同一页面再设计几个商品信息,每个商品有价格,图片,名称,以及添加至购物车按钮,点击按钮后添加至购物车* 实现购物车商品的总价计算  <!doctype html> <html lang="en"> <head>     <meta charset="UTF-8"

  • 详解通过源码解析Node.js中cluster模块的主要功能实现

    众所周知,Node.js中的JavaScript代码执行在单线程中,非常脆弱,一旦出现了未捕获的异常,那么整个应用就会崩溃.这在许多场景下,尤其是web应用中,是无法忍受的.通常的解决方案,便是使用Node.js中自带的cluster模块,以master-worker模式启动多个应用实例.然而大家在享受cluster模块带来的福祉的同时,不少人也开始好奇: 为什么我的应用代码中明明有app.listen(port);,但cluter模块在多次fork这份代码时,却没有报端口已被占用? Maste

  • js中使用DOM复制（克隆）指定节点名数据到新的XML文件中的代码

    复制代码 代码如下: <?php /* <?xml version="1.0" encoding="utf-8"?> <article> <item> <title name="t1"></title> <content>content1</content> <pubdate>2009-10-11</pubdate> </ite

  • JS中使用DOM来控制HTML元素

    JS中使用DOM来控制HTML元素

    1.getElementsByName():获取name. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~` 例: <p name="pn">hello</p> <p name="pn">hello</p> <p name="pn">hello</p> <script> function getName(){ var count=docume

  • Android中RecyclerView实现简单购物车功能

    Android中RecyclerView实现简单购物车功能

    Android中RecyclerView实现简单的购物车,供大家参考,具体内容如下 我们知道在ListView中用setTag来解决Item的复用问题,但是RecyclerView中已经帮我们封装好了复用,如果在项目中出现了RecyclerView的复用性问题时我们又该如何解决.先来看看效果图: 图片可能比较大也没有动态图片但效果是这样的!几天后就该有的都会有好了废话不说,进入正题 复用错误分析: RecyclerView设置数据源时加入了if判断,导致item重用时没有进入if判断.继续复用原

随机推荐