购物车功能实现-优快云博客

本文链接：https://blog.youkuaiyun.com/jettzed/article/details/52235209
本文介绍了一个简单的购物车功能实现案例，通过HTML、CSS和JavaScript构建网页应用，实现了商品的添加、删除、数量增减及总价计算等功能。
摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >
<!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>
    	//加入购物车
    	//调用该函数时传入了this(正在点的按钮)，
    	//需要声明参数来接收这个值(按钮对象)，
    	//参数名不能是关键字(this)。
    	function add_shoppingcart(btn) {
    		//1.获取按钮的爷爷(tr)
    		var tr = btn.parentNode.parentNode;
    		//2.获取它爷爷所有的孩子(td)
    		var tds = tr.children;
    		//3.获取td0的内容(商品名)
    		var name = tds[0].innerHTML;
    		//4.获取td1的内容(单价)
    		var price = tds[1].innerHTML;
    		//5.创建新行tr
    		var ntr = document.createElement("tr");
    		ntr.innerHTML = 
          '<td>'+name+'</td>'+
          '<td>'+price+'</td>'+
          '<td align="center">'+
            '<input type="button" value="-" onclick="decrease(this);"/> '+
            '<input type="text" size="3" readonly value="1" align="center"/> '+
            '<input type="button" value="+" onclick="increase(this);"/>'+
          '</td>'+
          '<td>'+price+'</td>'+
          '<td align="center"><input type="button" value="x" onclick="del(this);"/></td>';
         //6.将此行追加到购物车(tbody)下
         var tbody = 
        	  document.getElementById("goods");
         tbody.appendChild(ntr);
         sum();
    	}
    	//删除
    	function del(btn) {
    		btn.parentNode.parentNode.remove();
    		sum();
    	}
    	//加法
    	function increase(btn) {
    		//1.获取按钮的哥哥(文本框)
    		var text = 
    			btn.previousElementSibling;
    		//2.获取数量
    		var amount = text.value;
    		//3.+1，再写入框内
    		text.value = ++amount;
    		//4.获取按钮的父亲的哥哥(td1)
    		var td1 = 
    			btn.parentNode.previousElementSibling;
    		//5.获取td1的内容(单价)
    		var price = td1.innerHTML;
    		//6.计算金额
    		var mny = price*amount;
    		//7.获取按钮的父亲的弟弟(td3)
    		var td3 = btn.parentNode.nextElementSibling;
    		//8.将金额写入td3
    		td3.innerHTML = mny;
    		sum();
    	}
    	//减法
    	function decrease(btn) {
    		//1.获取按钮的弟弟(文本框)
    		var text = btn.nextElementSibling;
    		//2.获取数量
    		var amount = text.value;
    		if(amount==1) {
    			return;
    		}
    		//3.-1，再写入框内
    		text.value = --amount;
    		//4.获取按钮的父亲的哥哥(td1)
    		var td1 = 
    			btn.parentNode.previousElementSibling;
    		//5.获取td1的内容(单价)
    		var price = td1.innerHTML;
    		//6.计算金额
    		var mny = price*amount;
    		//7.获取按钮的父亲的弟弟(td3)
    		var td3 = btn.parentNode.nextElementSibling;
    		//8.将金额写入td3
    		td3.innerHTML = mny;
    		sum();
    	}
    	//求合计
    	function sum() {
    		//1.获取tbody下所有的行
    		var tbody = 
    			document.getElementById("goods");
    		var trs = tbody.children;
    		//2.遍历这些行
    		var sum = 0;
    		for(var i=0;i<trs.length;i++) {
    			//3.获取本行第4个孩子td3
    			var td3 = trs[i].children[3];
    			//4.获取td3的内容(金额)
    			var mny = parseFloat(td3.innerHTML);
    			//5.累加
    			sum += mny;
    		}
    		//6.将金额写入合计列
    		var total = 
    			document.getElementById("total");
    		total.innerHTML = sum;
    	}
    </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>8937</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">
        <!-- 
        <tr>
          <td>罗技M185鼠标</td>
          <td>80</td>
          <td align="center">
            <input type="button" value="-"/>
            <input type="text" size="3" readonly value="1"/>
            <input type="button" value="+"/>
          </td>
          <td>80</td>
          <td align="center"><input type="button" value="x"/></td>
        </tr>
        -->
      </tbody>
      <tfoot>
        <tr>
          <td colspan="3" align="right">总计</td>
          <td id="total"></td>
          <td></td>
        </tr>
      </tfoot>
    </table>    
  </body>
</html>
简易购物车
