购物车的简单实现

最新推荐文章于 2024-08-17 21:31:15 发布
最新推荐文章于 2024-08-17 21:31:15 发布
阅读量1.3k 收藏
点赞数
分类专栏： web前端开发 文章标签： function input button border xhtml div
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/JimMa/article/details/7952807
版权

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<body>
<h2 style="text-align:left">商品列表</h2>
<table width="800" border="0" id="tblProduct" cellpadding="1" cellspacing="1" bgcolor="black"> 
  <tr id="trMaster" bgcolor="white" style="display:none">
    <td>
    编号:<span>000001</span><br />
    名称：<span>aa</span><br />
    价格：<span>2.5</span><br />
    描述：<span>aaaaa</span><br />
   <div style="text-align:right"><input type="button" name="btnBuy" value="buy" /></div>
    </td>
    <td>  
    编号:<span>000001</span><br />
    名称：<span>aa</span><br />
    价格：<span>2.5</span><br />
    描述：<span>aaaaa</span><br />
   <div style="text-align:right"><input type="button" name="btnBuy" value="buy" /></div>  
    </td>
     <td> 
    编号:<span>000001</span><br /> 
    名称：<span>aa</span><br />
    价格：<span>2.5</span><br />
    描述：<span>aaaaa</span><br />
   <div style="text-align:right"><input type="button" name="btnBuy" value="buy" /></div>  
    </td>
    <td> 
    编号:<span>000001</span><br /> 
    名称：<span>aa</span><br />
    价格：<span>2.5</span><br />
    描述：<span>aaaaa</span><br />   
   <div style="text-align:right"><input type="button" name="btnBuy" value="buy" /></div>  
    </td>    
  </tr>
</table>
<h2 style="text-align:left">购物车</h2>
<table width="800" border="0" id="tblOrder" cellpadding="1" cellspacing="1" bgcolor="black">
 <tr bgcolor="white"><td>序号</td><td>编号</td><td>名称</td><td>描述</td><td>数量</td><td>单价</td><td>总价</td><td>删除</td></tr>
    <tr id="orderMarter" bgcolor="white" style="display:none">
    <td style=" width:5%">1</td>
    <td style=" width:10%">000001</td>
    <td style=" width:10%">aa</td>
    <td>aaaaa</td>
    <td style=" width:15%">
    <input type="text" name="txtNum" style="width:50px;" value="0" />
    <input type="button" name='btnAdd' style="width:10px; text-align:center" value="+" />
    <input type="button" name='btnCut' style="width:10px; text-align:center" value="-" />
    </td>
    <td style=" width:10%">0</td>
    <td style=" width:10%"><font color="red">0</font></td>
    <td style=" width:5%; text-align:center"><input type="button" name='btnRemove' style="width:30px; text-align:center" value="X" /></td>
    </tr>
</table>
<table width="800" border="0" id="tblTotal" cellpadding="1" cellspacing="1" bgcolor="black">
 <tr bgcolor="white" align="right">
    <td>总价</td>
    <td id="tdTotal"><font color="#FF0000" size="+1" face="Arial, Helvetica, sans-serif">0.0</font></td>
    </tr>
</table>

</body>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
var product=[
{prodId:"000001",prodName:"aa",price:2.5,description:"aaaaa"},
{prodId:"000002",prodName:"bb",price:2.4,description:"bbbbb"},
{prodId:"000003",prodName:"cc",price:2.3,description:"ccccc"},
{prodId:"000004",prodName:"dd",price:2.2,description:"ddddd"},
{prodId:"000005",prodName:"ee",price:2.1,description:"eeeee"},
{prodId:"000006",prodName:"ff",price:2.0,description:"fffff"},
{prodId:"000007",prodName:"gg",price:1.9,description:"ggggg"},
{prodId:"000008",prodName:"hh",price:1.8,description:"hhhhh"},
{prodId:"000009",prodName:"ii",price:1.7,description:"iiiii"}
];
</script>


<script type="text/javascript">
var j=0,i=-1,k=-1,len=$("#trMaster td").size();//数据和模板的td 都可以自定义，格式正确即可
$.each(product,function(index,prod){
 i++;
 k++;
 if(i%len==0){
  j++;
   CloneTR(j);//根据模板来克隆行
 }
 if(k==len)
  k=0;
 setTD(j,k,prod.prodId,prod.prodName,prod.price,prod.description);//给克隆行的td 赋值
});
//根据模板来克隆行
function CloneTR(id){
 $("#trMaster").clone(true).css("display","block").attr("id","tr"+id).appendTo("#tblProduct");
 $("#tr"+id+" td span").empty();
}
//给克隆行的td 赋值
function setTD(trId,index,prodId,prodName,price,description){
 var tr=$("#tr"+trId);   
 $(tr).find("td:eq("+index+")").find("span:eq(0)").html(prodId);
 $(tr).find("td:eq("+index+")").find("span:eq(1)").html(prodName);
 $(tr).find("td:eq("+index+")").find("span:eq(2)").html(price); 
 $(tr).find("td:eq("+index+")").find("span:eq(3)").html(description); 
}
var tempId="";
var num=0;
//点击buy
$("input[name='btnBuy']").click(function(){
var elem=$(this).parent().parent();//获取点击的button 的td
 var prodId=$(elem).find("span:eq(0)").html();
 var prodName=$(elem).find("span:eq(1)").html();
 var price=$(elem).find("span:eq(2)").html();
 var description=$(elem).find("span:eq(3)").html();
 if(prodId==""||prodId==null||prodId==undefined){
  alert("请点击其他产品");
 }else{  
  if(tempId.indexOf(prodId)!=-1){
   if(confirm('已存在，确定数量+1 吗?')){
    $("#tblOrder tr:gt(1)").each(function(){
     if($(this).find("td:eq(1)").html()==prodId){
      var num=$(this).find("td:eq(4)").find("input[name='txtNum']").attr("value");     
      $(this).find("td:eq(4)").find("input[name='txtNum']").attr("value",+num+1);//相当于parseInt(num)+1;
     }
    });
   }
  }else{
   num++;
   CloneOrder(num,prodId,prodName,price,description);
  }
  tempId+=prodId+","; 
  $("#tdTotal").html("<font color='#FF0000' size='+1' face='Arial, Helvetica, sans-serif'>"+GetTotalPrice().toFixed(2)+"</font>");
 }
});
//根据订单模板来clone 订单
function CloneOrder(id,prodId,prodName,price,description){
 $("#orderMarter").clone(true).css("display","block").attr("id","tro"+id).appendTo("#tblOrder");
 var tr=$("#tro"+id); 
 $(tr).find("td:eq(0)").html(num);
 $(tr).find("td:eq(1)").html(prodId);
 $(tr).find("td:eq(2)").html(prodName);
 $(tr).find("td:eq(3)").html(description); 
 $(tr).find("td:eq(4)").find("input[name='txtNum']").attr("value","1");
 $(tr).find("td:eq(5)").html(price);
 $(tr).find("td:eq(6)").html("<font color='red'>"+price+"</font>");
}
//获取总共价格
function GetTotalPrice(){
 var totalNum=0;
 $("#tblOrder tr:gt(1)").each(function(){
   var value=parseFloat($(this).find("td:eq(6)").text());   
   totalNum+=value;
 });
 return totalNum;
}
$(function(){
 $("#tblOrder input[name='txtNum']").bind("propertychange",function(){
  var value=$(this).val();
  var tr=$(this).parent().parent();
  if(value==0){
   if(confirm('确定要删除该商品吗?')){
    $(tr).remove();
   }
  }else{
   var price=$(tr).find("td:eq(5)").html();
   var total=value*price;
   $(tr).find("td:eq(6)").html("<font color='red'>"+total.toFixed(2)+"</font>");  
   $("#tdTotal").html("<font color='#FF0000' size='+1' face='Arial, Helvetica, sans-serif'>"+GetTotalPrice().toFixed(2)+"</font>");
  }
 });
 //加1
 $("#tblOrder input[name='btnAdd']").click(function(){
  var txtBox=$(this).parent().parent().find("td:eq(4)").find("input[name='txtNum']");
  var value=$(txtBox).attr("value");
   value=+value+1;
   $(txtBox).attr("value",value)
  
 });
 //减1
 $("#tblOrder input[name='btnCut']").click(function(){
  var txtBox=$(this).parent().parent().find("td:eq(4)").find("input[name='txtNum']");  
  var tr=$(this).parent().parent();
  var value=$(txtBox).attr("value");
  if(value>1){
   value=+value-1;
   $(txtBox).attr("value",value)
  }else{
   if(confirm('确定要删除该商品吗?')){
    $(tr).remove();
    $("#tdTotal").html("<font color='#FF0000' size='+1' face='Arial, Helvetica, sans-serif'>"+GetTotalPrice().toFixed(2)+"</font>");
   }
  }
 });
 
 //删除btnRemove
 $("#tblOrder input[name='btnRemove']").click(function(){
  var tr=$(this).parent().parent();
  if(confirm('确定要删除该商品吗?')){
    $(tr).remove();
    $("#tdTotal").html("<font color='#FF0000' size='+1' face='Arial, Helvetica, sans-serif'>"+GetTotalPrice().toFixed(2)+"</font>");
  }
 });
});

</script>

</html>

JimMa
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
PHP购物车简单实现
12-08
在这个简单的购物车实现中，我们没有考虑库存管理、删除购物车商品或更新商品数量等功能。在实际项目中，这些功能也是必不可少的。同时，为了提高用户体验，我们可能还需要提供一个清空购物车的选项，以及在用户未...
Android实现简单购物车功能
01-06
本文实例为大家分享了Android实现购物车功能的具体代码，供大家参考，具体内容如下 MainActivity布局： <?xml version=1.0 encoding=utf-8?> android:layout_width=match_parent android:layout_height=...
HTML简单的实现购物车
07-27
需要注意的是，虽然这个简单的实现可以满足基本需求，但在实际的电商网站中，购物车功能通常会涉及到更多的复杂性，如商品库存管理、用户会话维护、数据持久化等。此外，为了提供更好的用户体验，还可能需要使用CSS...
简单购物车jQuery实现
09-23
在本文中，我们将深入探讨如何使用jQuery来实现一个简单的单页面购物车功能。这个功能包括将商品添加到购物车、从购物车删除商品、调整商品数量以及计算总价。首先，让我们了解一下jQuery，它是一个轻量级的...
ios-购物车简单实现.zip
07-11
这个"ios-购物车简单实现.zip"压缩包提供了一个简单的购物车模型的实现，适用于学习和理解基本的购物车逻辑。下面我们将深入探讨这个实现涉及的关键知识点。 1. **数据结构与模型设计**： - 购物车通常由多个商品...
HTML5新标签语义及用法
机会牵引人才，人才牵引技术，技术牵引产品，产品牵引资本，资本牵引更多更大的机会。
10-12 1260
HTML 5 提供了一些新的元素和属性，反映典型的现代用法网站。其中有些是技术上类似  和  标签，但有一定含义，例如 （网站导航块）和 。这种标签将有利于搜索引擎的索引整理、小屏幕装置和视障人士使用。同时为其他浏览要素提供了新的功能，通过一个标准接口，如  和 以替代 标记 HTML5中新增标签  : 定义外部的内容，外部内容可以是来自一个外部的新闻提供者的一篇新的文章，或者来自
今天的任务提前完成了，写点流水账，哈哈
机会牵引人才，人才牵引技术，技术牵引产品，产品牵引资本，资本牵引更多更大的机会。
09-13 1001
N天没运动了，昨天晚上突然有了运动的冲动，拎起一件外套，去美廉美超市买了份凉皮和几包泡面，坐着超市的东南线方向的班车去了鸟巢附近的北京信息科技大学（因为那里打球便宜，一个小时2块钱，关键是有人陪着打球）。啪啪啪，打了一个多小时的球，有点累也有点困，可能这几天用脑有点过度吧，也可能是缺少锻炼的原因。打完球已将近九点半，回到学校洗了洗澡，抓紧准备第二天下午的工作总结汇报。23:10宿舍断电了，还没有将
实现JavaScript中继承的三种方式
机会牵引人才，人才牵引技术，技术牵引产品，产品牵引资本，资本牵引更多更大的机会。
09-07 909
在JavaScript中，继承可以通过三种手法实现原型链继承 使用apply、call方法 对象实例间的继承。 一、原型链继承 　　在原型链继承方面，JavaScript与java、c#等语言类似，仅允许单父类继承。prototype继承的基本方式如下： 代码如下: function Parent(){} function Child(){} Child.prot
jQuery基本原理
机会牵引人才，人才牵引技术，技术牵引产品，产品牵引资本，资本牵引更多更大的机会。
08-31 797
jQuery是目前使用最广泛的javascript函数库。据统计，全世界排名前100万的网站，有46%使用jQuery，远远超过其他库。微软公司甚至把jQuery作为他们的官方库。对于网页开发者来说，学会jQuery是必要的。因为它让你了解业界最通用的技术，为将来学习更高级的库打下基础，并且确实可以很轻松地做出许多复杂的效果。 一、选择网页元素jQuery的基本设计和主要用法，就是"选择某个网页
javascript数组操作方法
机会牵引人才，人才牵引技术，技术牵引产品，产品牵引资本，资本牵引更多更大的机会。
09-10 705
近几年，百度、网易、腾讯等公司对web前端开发工程师的考试中经常考到，javascript数组操作方法和字符串操作方法，以下简单对javascript数组操作方法进行一下归纳： shift：删除原数组第一项，并返回删除元素的值；如果数组为空则返回undefined var a = [1,2,3,4,5]; var b = a.shift(); //a：[2,3,4,5] b：1
详解javascript中的prototype
机会牵引人才，人才牵引技术，技术牵引产品，产品牵引资本，资本牵引更多更大的机会。
09-04 522
javascript中的phototype比较难理解的一个部分，我们这里详解一下该知识点。 1 原型法设计模式 在.Net中可以使用clone()来实现原型法 原型法的主要思想是，现在有1个类A,我想要创建一个类B,这个类是以A为原型的,并且能进行扩展。我们称B的原型为A。 2 javascript的方法可以分为三类： a 类方法 b 对象方法 c 原型方法 例子：
Java 图片转PDF的开源库
小湘西的博客
08-17 400
Flying Saucer 是一个用于将 XHTML 和 CSS 渲染为 PDF 的库。Apache PDFBox 是一个开源库，用于创建和操作 PDF 文档。如果使用 Maven，可以在。
大学生创业计划书(30)-两份资料.doc
08-20
大学生创业计划书(30)-两份资料.doc
学习DXP编辑多个对像
08-20
DXP编辑多个对像
基于Matlab编程的直线检测实现[Matlab编程].zip
08-20
MATLAB提供了多种直线检测技术，其中包括以下几种常用的方法： 1. Hough变换：Hough变换是一种基于极坐标空间的直线检测方法，通过将直线表示为参数空间中的点，将图像中的直线检测问题转化为参数空间中的点集聚类问题。MATLAB中的函数'hough'和'houghlines'可以实现Hough变换直线检测。 2. 边缘检测+RANSAC：先使用边缘检测方法（如Sobel、Canny等）提取图像中的边缘，然后使用RANSAC算法拟合直线模型。MATLAB中的函数'edge'可以进行边缘检测，而函数'fitline'可以使用RANSAC算法进行直线拟合。 3. 直线分段检测：将图像中的直线分段，在每个段上进行直线拟合。常见的方法包括分段最小二乘法、分段Hough变换等。MATLAB中的函数'fitline'可以对图像中的曲线进行分段直线拟合。 4. 基于模型的直线检测：根据直线的几何模型进行直线检测，常见的方法包括RANSAC算法、最小二乘法等。MATLAB中的函数'fitline'可以实现基于模型的直线检测。 以上是一些常用的MATLAB直线检测技术，具体的选择要根据实
网络防火墙：数字世界的守卫者
08-20
【计算机网络开发】通常指的是开发计算机网络相关的软件和系统，包括但不限于以下几个方面： 1. **网络协议开发**：设计和实现用于网络通信的协议，如TCP/IP、HTTP、FTP等。 2. **网络应用开发**：开发运行在网络上的应用程序，如网页浏览器、电子邮件客户端、文件共享应用等。 3. **网络服务开发**：创建和管理网络服务，例如Web服务、数据库服务、云服务等。 4. **网络安全**：开发用于保护网络安全的软件，包括防火墙、入侵检测系统、加密技术等。 5. **网络设备驱动程序开发**：为网络硬件设备编写驱动程序，如网卡、路由器、交换机等。 6. **网络管理工具**：开发用于网络监控、管理和故障排除的工具。 7. **嵌入式网络系统**：开发用于嵌入式设备（如智能家居设备、工业控制系统）的网络功能。 8. **网络编程语言和框架**：使用特定的编程语言和框架（如Python、Java、Node.js等）进行网络应用的开发。 9. **分布式系统开发**：设计和实现分布式计算系统，这些系统可以跨多个物理位置运行。 10. **网络性能优化**：优化网络应用和系统的性能，确保
最新linux系统命令（经典）
最新发布
08-20
###################################################################### 1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！ 2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！ 3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！ 4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！ 5. 如有链接无法下载、失效或广告，请联系管理员处理！ 6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！ 7. 如遇到加密压缩包，请使用WINRAR解压,如遇到无法解压的请联系管理员！ 8. 精力有限，不少源码未能详细测试（解密），不能分辨部分源码是病毒还是误报，所以没有进行任何修改，大家使用前请进行甄别！
网易云是一款音乐播放器和在线音乐平台.docx
08-20
网易云通常指的是网易云音乐，一款由网易公司开发的音乐播放器和在线音乐平台。以下是对网易云的详细介绍： 一、平台概述 开发公司：网易 研发背景：网易杭州研究院的成果 主要功能：音乐搜索与播放、个性化推荐、歌词同步显示、创建和收藏歌单、离线下载听歌、转发分享、在线电台与直播间、评论互动、音乐社区等 二、核心功能 音乐搜索与播放： 用户可以通过歌曲、歌手、专辑等信息进行搜索，并在线播放高品质的音乐。 收录华语、欧美、日韩等众多语种歌曲，涵盖电音、说唱、摇滚、ACG、古风、古典等超全音乐种类。 个性化推荐： 网易云音乐拥有超准的智能算法，能够根据用户的听歌历史和兴趣偏好，提供个性化推荐的歌曲、专辑和歌单。 歌词同步显示： 在播放过程中会自动下载并显示当前正在播放歌曲的歌词，帮助用户更好地理解和欣赏音乐。 创建和收藏歌单： 用户可以创建自己喜欢或者特定主题的歌单，并将喜欢的歌曲收藏到自己创建或关注别人创建的公共歌单中。 超31亿歌单库，邀请用户一起定制跑步、学习、工作、聚会等全场景歌单。 离线下载听歌： 支持将喜爱或常听的歌曲下载到手机本地，以便在没有网络连接时仍然能够畅享音乐。 转发分享功能
java购物车简单实现
03-27
Java购物车的简单实现可以通过以下步骤来完成： 1. 创建商品类（Product）：定义商品的属性，如商品名称、价格等，并提供相应的构造方法和获取属性值的方法。 2. 创建购物车类（ShoppingCart）：购物车类用于管理用户选择的商品。可以使用一个列表或者数组来存储用户选择的商品。购物车类应该提供以下功能： - 添加商品到购物车 - 从购物车中移除商品 - 获取购物车中的所有商品 - 计算购物车中商品的总价 3. 创建主程序类（Main）：在主程序类中，可以创建商品对象和购物车对象，并通过调用购物车类的方法来实现购物车的功能。 下面是一个简单的Java购物车实现的示例代码： ```java // 商品类 class Product { private String name; private double price; public Product(String name, double price) { this.name = name; this.price = price; } public String getName() { return name; } public double getPrice() { return price; } } // 购物车类 class ShoppingCart { private List<Product> products; public ShoppingCart() { products = new ArrayList<>(); } public void addProduct(Product product) { products.add(product); } public void removeProduct(Product product) { products.remove(product); } public List<Product> getProducts() { return products; } public double getTotalPrice() { double totalPrice = 0; for (Product product : products) { totalPrice += product.getPrice(); } return totalPrice; } } // 主程序类 public class Main { public static void main(String[] args) { // 创建商品对象 Product product1 = new Product("商品1", 10.0); Product product2 = new Product("商品2", 20.0); // 创建购物车对象 ShoppingCart shoppingCart = new ShoppingCart(); // 添加商品到购物车 shoppingCart.addProduct(product1); shoppingCart.addProduct(product2); // 获取购物车中的所有商品 List<Product> products = shoppingCart.getProducts(); for (Product product : products) { System.out.println("商品名称：" + product.getName() + "，价格：" + product.getPrice()); } // 计算购物车中商品的总价 double totalPrice = shoppingCart.getTotalPrice(); System.out.println("购物车中商品的总价：" + totalPrice); } } ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值