购物车

最新推荐文章于 2022-10-12 19:22:28 发布

荒--

最新推荐文章于 2022-10-12 19:22:28 发布

阅读量408

点赞数

分类专栏： WEB基础

本文链接：https://blog.csdn.net/wangqing84411433/article/details/70314364

版权

WEB基础专栏收录该内容

30 篇文章 1 订阅

订阅专栏

代码如下：

<!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">
      /*
        "加入购物车按钮"的实现
      	单击加入购物车按钮,获取该行数据(名称、单价、库存)
      	1.若库存<=0,return
      	2.若购物车表中已存在该商品,则在购物车列表中数量+1,
      	3.购物车列表不存在该商品,则追加一行
      	4.库存-1(2\3步骤无论那个成功都会执行此操作)
      */
      function add_shoppingcart(btn){//btn为传入的点击的该按钮
    	var tds = btn.parentNode.parentNode.getElementsByTagName("td");
        var name = tds[0].innerHTML;
        var price = parseInt(tds[1].innerHTML);
        var stock = parseInt(tds[3].innerHTML);    //库存
    	//alert(name+","+price+","+stock);    类型string number number   
    	//条件1检测
    	if(stock <= 0){
    	  return;
    	}
    	//条件2检测
    	var goodsTrs = document.getElementById("goods").getElementsByTagName("tr");
    	//alert(goodsTrs.length);若购物车中没有任何商品,则条件2跳过
    	for(var i=0;i<goodsTrs.length;i++){
    		var td = goodsTrs[i].getElementsByTagName("td");
    		if(name == td[0].innerHTML){     //购物车中已经存在
    		  var num = td[2].getElementsByTagName("input")[1];
    		  var temp = parseInt(num.value);    //注意计算时最好转换为number类型
    		  num.value = temp + 1;
    		  //库存-1
    		  tds[3].innerHTML = stock - 1;
    		  return;
    		}
    	}
    	//条件3检测(条件2不满足的情况下)
    	var goods = document.getElementById("goods");
    	var addTr = goods.insertRow();
    	addTr.innerHTML = 
    	  "<tr>"+
            "<td>"+name+"</td>"+
            "<td>"+price+"</td>"+
            "<td align='center'>"+
              "<input type='button' value='-'οnclick='decrease(this);'/> "+
              "<input type='text' size='4' readonly value='1'/> "+
              "<input type='button' value='+' οnclick='increase(this);'/>"+
            "</td>"+
            "<td>"+price+"</td>"+
            "<td align='center'>"+
              "<input type='button' value='x' οnclick='del(this);'/>"+
            "</td>"+
          "</tr>";
    	//库存-1
    	tds[3].innerHTML = stock - 1;
    	//计算总计
    	sum();
      }
      
      /*
     	此方法为调用方法,单击"+" "-" "x"按钮时返回相应商品库存所在节点
      */
      function findDetail(btn){
    	var name = btn.parentNode.parentNode.getElementsByTagName("td")[0].innerHTML;
    	//遍历
    	var trs = document.getElementById("table1").getElementsByTagName("tr");
    	for(var i=1;i<trs.length;i++){//从1开始遍历,第一行为th表头不需要遍历
    	  var tds = trs[i].getElementsByTagName("td");
    	  if(name == tds[0].innerHTML){//找到匹配的商品,返回库存所在节点
    		return tds[3];  
    	  }
    	}
      }
      
      /*
                         购物车中"+"按钮的实现
                        先查看库存是否还有再进行后续操作
        1.单击"+"按钮后购物车中商品数量+1,库存-1
        2.从新计算金额
        3.计算总计
      */
      function increase(btn){
    	var stock = parseInt(findDetail(btn).innerHTML);//获取库存
    	if(stock <= 0){
    	  return;
    	}
    	//1.input中数量+1,库存-1
    	var input = btn.parentNode.getElementsByTagName("input")[1];	
    	var temp = parseInt(input.value);
    	input.value = ++temp;
    	findDetail(btn).innerHTML = stock - 1;
    	//从新计算金额
    	var tds = btn.parentNode.parentNode.getElementsByTagName("td");
    	var total = parseInt(tds[1].innerHTML) * temp;
    	tds[3].innerHTML = total;
    	//计算总计
    	sum();
      }
      
      /*
		 购物车中"-"按钮的实现
		获取库存的数量
		1.单击"-"按钮后购物车中商品数量-1,库存+1
		2.从新计算金额
		3.计算总计
     */
      function decrease(btn){
    	//若input里面的值<=0,则"-"按钮不起作用 
    	var input = btn.parentNode.getElementsByTagName("input")[1];
      	var temp = parseInt(input.value);
      	if(temp <= 1){
      	  return;
      	}
      	input.value = --temp;
    	//获取库存
    	var stock = parseInt(findDetail(btn).innerHTML);
    	findDetail(btn).innerHTML = stock + 1;
    	//从新计算金额
    	var tds = btn.parentNode.parentNode.getElementsByTagName("td");
    	var total = parseInt(tds[1].innerHTML);
    	tds[3].innerHTML = total* temp;
    	//计算总计
    	sum();
      }
      
      /*
		 购物车中"x"按钮的实现
		获取库存的数量
		1.单击"x"按钮后购物车中改行删除,库存+input的值
		2.计算总计
     */
      function del(btn){
        //获取库存
    	var stock = parseInt(findDetail(btn).innerHTML);
    	var tds = btn.parentNode.parentNode.getElementsByTagName("td");
		var num = parseInt(tds[2].getElementsByTagName("input")[1].value);
        //增加库存相应数量
		findDetail(btn).innerHTML = stock + num;
        //删除该行数据
        var tr = btn.parentNode.parentNode;
        tr.parentNode.removeChild(tr);
        //计算总计
        sum();
      } 
     
      /*
                        总计方法
      */
      function sum(){
    	var trs = document.getElementById("goods").getElementsByTagName("tr");
    	var amount = 0;
    	for(var i=0;i<trs.length;i++){
    	  var money = parseInt(trs[i].getElementsByTagName("td")[3].innerHTML);
    	  amount += money;
    	}
    	var total = document.getElementById("total");
    	total.innerHTML = amount;
      }
    </script>
  </head>
  <body>
    <h1>真划算</h1>
    <table id="table1">
      <tr>
        <th>商品</th>
        <th>单价(元)</th>
        <th>颜色</th>
        <th>库存</th>
        <th>好评率</th>
        <th>操作</th>
      </tr>   
      <tr>
        <td>罗技M185鼠标</td>
        <td>80</td>
        <td>黑色</td>
        <td>4</td>
        <td>98%</td>
        <td align="center">
          <input type="button" value="加入购物车" οnclick="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="加入购物车" οnclick="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="加入购物车" οnclick="add_shoppingcart(this);"/>
        </td>
      </tr>
      <tr>
        <td>蓝牙耳机</td>
        <td>100</td>
        <td>蓝色</td>
        <td>8937</td>
        <td>95%</td>
        <td align="center">
          <input type="button" value="加入购物车" οnclick="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="加入购物车" οnclick="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>

注意事项：

再利用数据进行计算时,要先利用parseInt()方法转化为number再计算

荒--

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
购物车

代码如下：购物车 h1 { text-align:center; } table { margin:0 auto; width:60%; border:2px solid #aaa; border-collapse:collapse;
复制链接

扫一扫