js实现购物车效果

在网页中实现动态添加物品的效果.
代码如下:


<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">
    script>
    <script type="text/javascript">
        /*定义事件时,若传入this,它是本次触发事件的对象*/
        //调用该函数时传入了this,它就是正在单击的按钮对象,需要声明参数
        //来接收此对象.即obj=this=正在点的按钮.
        function add_shoppingcart(btn){
            //获取btn所在的行。
            var tr = btn.parentNode.parentNode;
            //获取btn下的所有列
            var tds = tr.children;
            //获取商品名称
            var name = tds[0].innerHTML;
            //获取商品价格
            var price = parseInt(tds[1].innerHTML);
            console.log(name+":"+price);



            //创建一个新的行
            var ntr = document.createElement("tr");
            ntr.innerHTML = 
             ''+name+''+
             ''+price+''+
             ''+
                ' '+
                '' +
                ''+  
             ''+
             ''+price+''+
             '';

            //将此行添加到购物车列表的tbody下.
            var tbody = document.getElementById("goods");
            tbody.appendChild(ntr);

            //求和
            sum();
        }
        function del(btn){
            //获取btn所在的行
            var tr = btn.parentNode.parentNode;
            tr.remove();

            //求和
            sum();
        }
        function increase(btn){
            //获取按钮的前一个元素
            var td1 = btn.previousElementSibling;
        //  console.log(td1);
            var amount = parseInt(td1.value);
            //设置td1的值
            td1.value = ++amount;
            //获取商品的单价
            //获取btn所在的行
            var tr = btn.parentNode.parentNode;
            //获取商品单价
            var price = parseInt(tr.children[1].innerHTML);
        //  console.log(price);

            //获取btn的下一个元素(商品价格)
            var td2 = btn.parentNode.nextElementSibling;
            //设置商品的总价
            td2.innerHTML = amount*price;

            sum();
        }
        function decrease(btn){
            //获取按钮的后一个元素
            var td1 = btn.nextElementSibling;
        //  console.log(td1);
            var amount = parseInt(td1.value);
            //设置td1的值

            //当amount<=1时返回
            if(amount<=1){
                return;
            }
            td1.value = --amount;
            //获取商品的单价
            //获取btn所在的行
            var tr = btn.parentNode.parentNode;
            //获取商品单价
            var price = parseInt(tr.children[1].innerHTML);
        //  console.log(price);

            //获取btn的下一个元素(商品价格)
            var td2 = btn.parentNode.nextElementSibling;
            //设置商品的总价
            td2.innerHTML = amount*price;
            sum();
        }

        /*计算合计,该方法在以下四处被调用:
         * 加入购物车,删除,增加,减少.(之后)
         * 每次计算时无条件获取所有的数据行,并求和,因此没有参数.*/
         function sum(){
            //获取购物车tbody中的所有行
            var tbody = document.getElementById("goods");
            var trs = tbody.children;
            var total = 0 ;
            for(var i = 0 ; i < trs.length ; i++){
                //获取每一行的总价
                var money = parseInt(trs[i].children[3].innerHTML);
                total += money;
            }
            //设置总价
            //获取总价所在的td
            var sum = document.getElementById("total");
            //设置总价
            sum.innerHTML = 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>80td>
        <td>黑色td>
        <td>893td>
        <td>98%td>
        <td align="center">
          <input type="button" value="加入购物车" onclick="add_shoppingcart(this)"/>
        td>
      tr>
      <tr>
        <td>微软X470键盘td>
        <td>150td>
        <td>黑色td>
        <td>9028td>
        <td>96%td>
        <td align="center">
          <input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/>
        td>
      tr>
      <tr>
        <td>洛克iphone6手机壳td>
        <td>60td>
        <td>透明td>
        <td>672td>
        <td>99%td>
        <td align="center">
          <input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/>
        td>
      tr>
      <tr>
        <td>蓝牙耳机td>
        <td>100td>
        <td>蓝色td>
        <td>8937td>
        <td>95%td>
        <td align="center">
          <input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/>
        td>
      tr>
      <tr>
        <td>金士顿U盘td>
        <td>70td>
        <td>红色td>
        <td>482td>
        <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>

你可能感兴趣的:(网页前端,学习记录)