基于css+html+js的购物车

最新推荐文章于 2022-11-24 14:39:29 发布

邋遢大王穿US11

最新推荐文章于 2022-11-24 14:39:29 发布

阅读量3.1k

点赞数 2

文章标签：模块功能：加入购物车【html+css+js】

本文链接：https://blog.csdn.net/mlxgzz/article/details/95598940

版权

如何插入一段漂亮的代码片

根据CSDN一位老哥的代码进行完善，加入了部分限制,例如，限制可以购买的数量不能高于库存，同一件商品多次加入购物车只显示一个条目等。原帖：https://blog.csdn.net/vayne_xiao/article/details/54572615
直接复制就可使用。


<!DOCTYPE html>
<html>
  <head>
    <title>购物车</title>
    <meta charset="utf-8" />
    <style type="text/css">
      h1 {
        text-align:center;
      }
      table {
        margin:0 auto;
        width:60%;
        border:2px solid #aaa;
        border-collapse:collapse;
      }
      table th, table td {
        border:2px solid #aaa;
        padding:5px;
      }
      th {
        background-color:#eee;
      }
    </style>
    <script type="text/javascript">
    	//加入购物车=================================================
    	//调用此函数时传入了this,声明参数来接收它,参数名不能叫this(关键字)
    	function add_shoppingcart(btn){
			
			
			//获取按钮的爷爷
			var tr = btn.parentNode.parentNode;
			//获取tr的所有孩子(tds)
			var tds = tr.getElementsByTagName("td");
			//获取第1个td的内容(商品名)
			var name = tds[0].innerHTML;
			//获取第2个td的内容(单价)
			var price = tds[1].innerHTML;
			//判断购物车中是否已有该商品
			var body = btn.parentNode.parentNode.parentNode.parentNode.parentNode;			
			var tbs = body.getElementsByTagName("table");
			var trs = tbs[1].getElementsByTagName("tr");
			for(var i=1;i<trs.length-1;i++){
				var tds2= trs[i].getElementsByTagName("td");
				var name2 = tds2[0].innerHTML;
				if(name == name2){
					return 0;
					}
			}
			
			//创建一个新的tr,设置内容,追加到tbody下
			var newtr = document.createElement("tr");
			newtr.innerHTML = '<td>'+name+'</td>'+
		          			'<td>'+price+'</td><td align="center">'+
		            		'<input type="button" value="-" οnclick="decrease(this);"/> '+
		           			'<input type="text" size="3" readonly value="1"/> '+
		           			'<input type="button" value="+" οnclick="increase(this);"/>'+
		          			'</td>'+
		         			'<td>'+price+'</td>'+
		          			'<td align="center"><input type="button" value="x" οnclick="drop(this);"/></td>';//添加删除事件
		    var tbody = document.getElementById("goods");
		    tbody.appendChild(newtr);
		    sum();
    	}
    	//加法 数量不能大于库存========================================
    	function increase(btn){
    		//获取按钮的父亲
    		var td2 = btn.parentNode;
    		//获取td2内的文本框
    		var text = td2.getElementsByTagName("input")[1];
    		//获取文本框内值+1后写回文本框
			var amount=0;
			var td1 = td2.parentNode.getElementsByTagName("td")[0];
			var name = td1.innerHTML;
			var body = btn.parentNode.parentNode.parentNode.parentNode.parentNode;			
			var tbs = body.getElementsByTagName("table");
			var trs = tbs[0].getElementsByTagName("tr");
			for(var i=1;i<trs.length;i++){			
				var tds= trs[i].getElementsByTagName("td");
				var name2 = tds[0].innerHTML;
				if(name2 == name){
					limitnum = tds[3].innerHTML;
					}
			}			
			if( text.value < limitnum){
			var amount = text.value;
    		text.value = ++amount;
			}else{
				var amount = text.value;
				alert("库存不足");
			}
    		//获取td2的哥哥td1,从中取出单价
    		var td1 = td2.parentNode.getElementsByTagName("td")[1];
    		var price = td1.innerHTML;
    		//计算金额
    		var mny = price*amount;
    		//获取td2的弟弟td3,将金额写回td3
    		var td3 = td2.parentNode.getElementsByTagName("td")[3];
    		td3.innerHTML = mny;
    		sum();
    	}
    	//减法 数量不能小于1 =================================================
		function decrease(btn){
    		//获取按钮的父亲td2
    		var td2 = btn.parentNode;
    		//获取td2的文本框
    		var text = td2.getElementsByTagName("input")[1];
    		//获取文本框的值-1写回文本框
    		var amount = text.value;
    		if(amount<1){
    			text.value = 0;
    		}
    		if(amount>0){
    			text.value = --amount;
    		}if(amount==0){
				var tr = btn.parentNode.parentNode;
				var tbody = document.getElementById("goods");
				tbody.removeChild(tr);
				sum();
			}
    		//获取td2的哥哥td1,从中取回单价
    		var td1 = td2.parentNode.getElementsByTagName("td")[1];
    		var price = td1.innerHTML;
    		//计算金额
    		var mny = price*amount;
    		//获取td2的弟弟td3,将金额写入td3
    		var td3 = td2.parentNode.getElementsByTagName("td")[3];
    		td3.innerHTML = mny;
    		sum();
    	}
    	//删除tr行,而不是删除tr行中所有td====================
    	function drop(btn){
    		var tr = btn.parentNode.parentNode;
    		var tbody = document.getElementById("goods");
    		tbody.removeChild(tr);
			sum();
    	}
    	//计算总金额
    	function sum() {
    		//获取购物车内所有的数据行
    		var tbody = 
    			document.getElementById("goods");
    		var trs = 
    			tbody.getElementsByTagName("tr");
    		//遍历这些行
    		var s = 0;
    		for(var i=0;i<trs.length;i++) {
    			//获取每一行下第4个td的内容(金额)
    			var mny = 
    				trs[i].getElementsByTagName("td")[3].innerHTML;
    			//累加
    			s += parseFloat(mny);
    		}
    		//将合计值写入合计列(id="total")
    		var td = 
    			document.getElementById("total");
    		td.innerHTML = s;
    	}
    	</script>
  </head>
  <body>
    <h1>真划算</h1>
    <table>
      <tr>
        <th>商品</th>
        <th>单价(元)</th>
        <th>颜色</th>
        <th>库存</th>
        <th>好评率</th>
        <th>操作</th>
      </tr>   
      <tr>
        <td>罗技M185鼠标</td>
        <td>80</td>
        <td>黑色</td>
        <td>893</td>
        <td>98%</td>
        <td align="center">
          <input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/>
        </td>
      </tr>
      <tr>
        <td>微软X470键盘</td>
        <td>150</td>
        <td>黑色</td>
        <td>9028</td>
        <td>96%</td>
        <td align="center">
          <input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/>
        </td>
      </tr>
      <tr>
        <td>洛克iphone6手机壳</td>
        <td>60</td>
        <td>透明</td>
        <td>672</td>
        <td>99%</td>
        <td align="center">
          <input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/>
        </td>
      </tr>
      <tr>
        <td>蓝牙耳机</td>
        <td>100</td>
        <td>蓝色</td>
        <td>5</td>
        <td>95%</td>
        <td align="center">
          <input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/>
        </td>
      </tr>
      <tr>
        <td>金士顿U盘</td>
        <td>70</td>
        <td>红色</td>
        <td>482</td>
        <td>100%</td>
        <td align="center">
          <input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/>
        </td>
      </tr>
    </table>
  
    <h1>购物车</h1>
    <table>
      <thead>
        <tr>
          <th>商品</th>
          <th>单价(元)</th>
          <th>数量</th>
          <th>金额(元)</th>
          <th>删除</th>
        </tr>
      </thead>
      <tbody id="goods">
      </tbody>
      <tfoot>
        <tr>
          <td colspan="3" align="right">总计</td>
          <td id="total"></td>
          <td></td>
        </tr>
      </tfoot>
    </table>    
  </body>
</html>