经典案例: 购物车

完整案例:
<!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">
        function add_shoppingcart(btn){
            //console.log(btn);
            var tr = btn.parentNode.parentNode;
            //console.log(tr);
            //找到全部td
            var tds = tr.getElementsByTagName('td');
            //console.log(tds);
            //获取商品名
            var name=tds[0].innerHTML;
            var price=parseFloat(tds[1].innerHTML);
            //console.log(name);
            //console.log(price);
            //将商品信息添加到购物车表格
            var tr = document.createElement('tr');
            tr.innerHTML='<td>'+name+'</td>'+
                '<td>'+price+'</td>'+
                '<td align="center">'+
                '<input type="button" value="-" onclick="changeNum(this, -1);">'+
                '<input type="text" size="3" readonly value="1"/>'+
                '<input type="button" value="+" onclick="changeNum(this, 1);">'+
            '</td>'+
                '<td></td>'+
                '<td align="center"><input type="button" value="X" onclick="removeItem(this);"></td>';
            //console.log(tr);
            //将tr插入到购物车
            var tbody=document.getElementById('goods');
            tbody.appendChild(tr);
            total();
        }
        //计算商品总价
        function total(){
            //console.log('total()');
            var tbody=$('goods');
            var trs = 
                tbody.getElementsByTagName('tr');
            console.log(trs);
            var sum = 0;
            for(var i=0; i<trs.length; i++){
                var tr = trs[i];
                console.log(tr);
                var tds=tr.getElementsByTagName('td');
                console.log(tds);
                //获取商品的价格
                var price=parseFloat(
                        tds[1].innerHTML);
                console.log(price);
                //获取数量值 
                var num = parseInt(tds[2]
                    .getElementsByTagName('input')[1]
                    .value);
                console.log(num);
                //计算金额
                var money = num*price;
                tds[3].innerHTML=money.toFixed(2);
                //累计总价
                sum += money;
            }
            //将总价写到 tfoot中
            $('total').innerHTML=sum.toFixed(2);
        }

        function $(id){
            return document.getElementById(id);
        }

        function changeNum(btn, n){
            //console.log(n);
            //找到当前的num
            var input=btn.parentNode
                .getElementsByTagName('input')[1];
            console.log(input);
            var num = parseInt(input.value);
            console.log(num); 
            //增加/减少
            num += n;
            //检查是否<=0
            if(num<=0){
                return;
            }
            //更新 input.value
            input.value = num;
            total();
        }

        function removeItem(btn){
            var tr=btn.parentNode.parentNode;
            var tbody = $('goods');
            tbody.removeChild(tr);
            total();
        }
    </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>
经典案例: 购物车

猜你喜欢
