经典案例--JS购物车

最新推荐文章于 2023-09-12 15:02:57 发布
choulou3459
最新推荐文章于 2023-09-12 15:02:57 发布
阅读量243
点赞数
文章标签： javascript ViewUI
原文链接：https://my.oschina.net/u/1393072/blog/514508
版权
<!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">
      var tbody;
      function add_shoppingcart(btn){
        //1.根据点击的按钮获取同行的商品名和单价
        //根据点击的按钮找到其爷爷tr
        var tr = btn.parentNode.parentNode;
        //找出爷爷tr的所有td孩子
        var tds = tr.getElementsByTagName("td");
        //第一个td的内容是商品名
        var name = tds[0].innerText;
        //第二个td的内容是单价
        var price = tds[1].innerText;
        
        tbody = document.getElementById("goods");
        //2.创建一个tr，将其插入到购物车table下
        var amount = 1;
        if(!has_goods(name)){         
          
          //var ntr = tbody.insertRow();
          var ntr = document.createElement("tr");        
          ntr.innerHTML = 
          '<td>'+name+'</td>'+
          '<td>'+price+'</td>'+
          '<td align="center">'+
            '<input type="button" value="-" onclick="reduce(this);"/> '+
            '<input type="text" size="3" readonly value='+amount+'> '+
            '<input type="button" value="+" onclick="add(this);"/>'+
          '</td>'+
          '<td>'+price+'</td>'+
          '<td align="center"><input type="button" value="x" onclick="del(this);"/></td>';
          //在tbody下插入一行
          tbody.appendChild(ntr);
        } else {
          var trs = tbody.getElementsByTagName("tr");
          for(var i=0;i<trs.length;i++){
            if(trs[i].getElementsByTagName("td")[0].innerText==name){
              amount = trs[i].getElementsByTagName("td")[2].getElementsByTagName("input")[1].value++;              
              trs[i].getElementsByTagName("td")[3].innerText = (++amount)*price;
            }
          }
        }
      }
      
      function has_goods(name){
    	tbody = document.getElementById("goods");
        var trs = tbody.getElementsByTagName("tr");
        for(var i=0;i<trs.length;i++){
          if(trs[i].getElementsByTagName("td")[0].innerText==name){
            return true;            
          }
        }
        return false;
      }
      
      function add(btn){
    	  var input = btn.parentNode.getElementsByTagName("input")[1];
    	  var amount = ++input.value;
    	  var price = btn.parentNode.parentNode.getElementsByTagName("td")[1].innerText
    	  btn.parentNode.parentNode.getElementsByTagName("td")[3].innerText = amount*price;
      }
      function reduce(btn){
    	  
    	  var input = btn.parentNode.getElementsByTagName("input")[1];    	  
    	  var amount = --input.value;
    	  if(amount<1){
    		  amount = ++input.value;
    	  }
    	  var price = btn.parentNode.parentNode.getElementsByTagName("td")[1].innerText
    	  btn.parentNode.parentNode.getElementsByTagName("td")[3].innerText = amount*price;
      }
      
      function del(btn){
    	  var tr = btn.parentNode.parentNode;
    	  btn.parentNode.parentNode.parentNode.removeChild(tr);
      }
    </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">
             
      </tbody>
      <tfoot>
        <tr>
          <td colspan="3" align="right">总计</td>
          <td id="total"></td>
          <td></td>
        </tr>
      </tfoot>
    </table>    
  </body>
</html>
转载于:https://my.oschina.net/u/1393072/blog/514508