使用JS+JQuery实现一个简单的购物车功能

前言:最近刚学JQuery,今天项目经理给了一个练手的题,要求是实现点击表格中的"加入购物车"之后,能
够在下方的表格动态添加商品信息,并且动态修改商品的数量、金额和总价。
目前实现了点击加入购物车能添加到下面的表格中,但是无法增加数量和修改单价,希望大佬们能给点思路。后续如果做出来了我会更新此博客。
更新:功能已完善,达到所需效果
首先是html页面,如图:
使用JS+JQuery实现一个简单的购物车功能_第1张图片
但是目前只能做到加入购物车,无法增加数量和金额,如图:
更新:现在对代码做了修改,完成功能:
1.点击加入购物车,能将商品信息加入到购物车中并更新数量、金额以及总价信息
2.点击购物车中的input按钮,能够增加或减少数量,并更新金额以及总价信息
3.当购物车数量变化时,动态的更新数量、金额以及总价信息(如删除商品时)
使用JS+JQuery实现一个简单的购物车功能_第2张图片
代码如下:

<body>
<h1>特价商品</h1>
<div class="sp1">
          <table id="LB">
    <tr>
              <th>商品名称</th>
              <th>单价</th>
              <th>库存</th>
              <th>好评率</th>
              <th>操作</th>
            </tr>
    <tr id="SB">
              <td id="SB_Name">水杯</td>
              <td id="SB_price">25</td>
              <td id="SB_count">100</td>
              <td>90%</td>
              <td><input type="button" value="加入购物车" onClick="addcar(this)" /></td>
            </tr>
    <tr id="JP">
              <td>键盘</td>
              <td>100</td>
              <td id="jianpan">300</td>
              <td>80%</td>
              <td><input type="button" value="加入购物车" onClick="addcar(this)"/></td>
            </tr>
    <tr id="SJ">
              <td>华为手机</td>
              <td>5000</td>
              <td id="phone">50</td>
              <td>100%</td>
              <td><input type="button" value="加入购物车" onClick="addcar(this)" /></td>
            </tr>
  </table>
        </div>
<span id="car1">
        <h1>购物车</h1>
        </span>
<table id="car">
          <tr>
    <th id="carName">商品名称</th>
    <th>单价</th>
    <th id="carCount">数量</th>
    <th id="carMoney">金额</th>
    <th>操作</th>
  </tr>
    <td colspan="5">总价:<span id="zongjia"></span></td>
</table>
</body>

JS以及JQuery中定义了四个方法,分别是
addcar(this):点击购物车时调用此方法,判断购物车内是否有此商品,有则增加数量,没有则新建表格添加相应信息
change():当购物车数量变化时,调用此方法
changeJE(num,row):某些情况需要的参数不同,所以重新写了这个方法
del(this):删除当前行
代码如下:

<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
		<script>
			var count=0;
			function addcar(obj){
			var tab=document.getElementById("LB");
			var cartb=document.getElementById("car");
			var row = obj.parentNode.parentNode;//传入的是按钮的对象,两次父节点就是tr
			var id=$(row).attr("id");//获取当前tr对象的id
			//思路是点击按钮时循环对比当前的商品名称是否和购物车的商品名有没有重复
				//alert($("#"+id).children("td").eq(0).text());
				
				if(count==0){
				var $tr=$("");
				var $td1=$(""+$("#"+id).children("td").eq(0).text()+"");
				var $td2=$(""+$("#"+id).children("td").eq(1).text()+"");
				var $td3=$("+id+"_number\" class=\"num\" onChange=\"change(this)\"/>");
				var $td4=$(""+$("#"+id).children("td").eq(1).text()+"");
				var $td5=$("");
				$tr.append($td1).append($td2).append($td3).append($td4).append($td5);
				$("#car").append($tr);
				zongjia();
				count++;
					return;
				}else{
					if(!document.getElementById(id+"_tr")){
						var $tr=$("");
						var $td1=$(""+$("#"+id).children("td").eq(0).text()+"");
						var $td2=$(""+$("#"+id).children("td").eq(1).text()+"");
						var $td3=$("+id+"_number\" class=\"num\" onChange=\"change(this)\"/>");
						var $td4=$(""+$("#"+id).children("td").eq(1).text()+"");
						var $td5=$("");
						$tr.append($td1).append($td2).append($td3).append($td4).append($td5);
						$("#car").append($tr);
						zongjia();
						count++;
					}else{
						var num=parseInt($("#"+id+"_tr").children("td").eq(2).children("input").eq(0).val())+1;
						$("#"+id+"_tr").children("td").eq(2).children("input").eq(0).val(num);
						zongjia();
						changeJE(num,row);	
					}
				}
			}
	
		function del(obj) {      //删除操作 
            var row = obj.parentNode.parentNode; // 按钮所在行
			$(row).remove();
			zongjia()
         }
			
		function changeJE(num,row){// 此方法是点击加入购物车按钮时执行的方法  现在的obj是row对象
			var cartb=document.getElementById("car");
			zongjia();
			var name=row.cells[0].innerHTML;//商品列表中当前行的id
			for(var i=0;i<cartb.rows.length;i++){//循环对比购物车的id 相等就改变金额
				var carname=cartb.rows[i+1].cells[0].innerHTML;
				if(name==carname){   //对比ID是否相等
					cartb.rows[i+1].cells[3].innerHTML=num*parseInt($(row).children("td").eq(1).text());
				}
			}
		}
		function change(obj){// 此方法是点击input按钮时(输入值按回车也可以)执行的方法  现在的obj是input对象
			zongjia();
			var row=obj.parentNode.parentNode;
			var id=row.getAttribute("id");
			var num=row.cells[2].getElementsByTagName("input")[0].value;
			row.cells[3].innerHTML=num*parseInt($(row).children("td").eq(1).text());
		}
			
		function zongjia(){
			var cartb=document.getElementById("car");
			//定义一个money
			var money=0;
			var shuliang=0;
			//获取数量*单价的值赋值给money1
			for(var i=0;i<cartb.rows.length-1;i++){
        		shuliang  =cartb.rows[i+1].cells[2].children[0].value;
				var money1=shuliang *cartb.rows[i+1].cells[1].innerHTML;
				money=money+money1;
			}
			$("#zongjia").text(money);
		}
		</script>

更新:到目前为止所有的功能已经实现,缺点是代码量略多,没有进行优化。当运行的时候还会报一个错,但是居然不影响运行,这里我还没搞懂,希望大佬知道问题在哪能给小弟一个提示,感激不尽!
错误如下:
在这里插入图片描述
总结:到这里基本上所有功能已经完成了,因为刚开始学,很多语法、结构并不熟悉,所以写这个简单的demo显得很吃力,也花费了大量时间,不过记录在这里,也算是自己的努力没有白费。希望能给需要实现此功能的朋友做一下参考吧,大家一起进步,以上。

你可能感兴趣的:(JavaScript,js,jquery,java)