原生js实现购物车功能

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    /* CSS样式部分 */
    #form {
      width: 800px;
      margin: 20px auto;
    }

    #form .input {
      padding: 5px 10px;
      margin: 5px 10px;
      width: 200px;
    }

    td {
      text-align: center;
      padding: 10px;
    }

    .num {
      width: 20px;
      text-align: center;
    }
  </style>
</head>

<body>
  <!-- html代码 -->
  <div id="form">
    商品名称：<input type="text" class="input" id="goods_name" placeholder="商品名称">
    <br>
    商品价格：<input type="number" value="0" class="input" id="goods_price" placeholder="商品价格">
    <br>
    商品数量：<input type="number" value="1" class="input" id="goods_num" placeholder="商品数量">
    <br>
    <br>
    <button id="add_goods">添加商品</button>
    <br>
    <br>

    <table border=1 cellspacing='0' width=500>
      <thead>
        <tr>
          <th><input type="checkbox" id="all">全选</th>
          <th>商品名称</th>
          <th>商品价格</th>
          <th>商品数量</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td><input type="checkbox" name="danxuan"></td>
          <td>iphone6</td>
          <td>6000</td>
          <td>
            <button onclick="jian(this)">-</button>
            <input type="text" value="1" class="num">
            <button onclick="add(this)">+</button>
          </td>
          <td>
            <button onclick="del(this)">删除</button>
          </td>
        </tr>
        <tr>
          <td><input type="checkbox" name="danxuan"></td>
          <td>iphone9</td>
          <td>8999</td>
          <td>
            <button onclick="jian(this)">-</button>
            <input type="text" value="1" class="num">
            <button onclick="add(this)">+</button>
          </td>
          <td>
            <button onclick="del(this)">删除</button>
          </td>
        </tr>
      </tbody>
    </table>
    <br>
    <button id="checkdel">选中删除</button>
    总价格：<span id="sum">0</span>
  </div>
  <!-- js部分 -->
  <script>
    var addBtn = document.getElementById('add_goods');
    var tbody = document.getElementsByTagName('tbody')[0];
    var goodsName = document.getElementById('goods_name');
    var goodsPrice = document.getElementById('goods_price');
    var goodsNum = document.getElementById('goods_num');
    var all = document.getElementById('all');
    var checkDel = document.getElementById('checkdel')
    var danxuan = document.getElementsByName('danxuan');
    // 添加 
    addBtn.onclick = function () {
      var goodsNameV = goodsName.value;
      var goodsPriceV = goodsPrice.value;
      var goodsNumV = goodsNum.value;
      var tr = document.createElement('tr');
      tr.innerHTML = '<td><input type="checkbox" name="danxuan"></td>\
                  <td>' + goodsNameV + '</td><td>' + goodsPriceV + '</td>\
                  <td><button onclick="jian(this)">-</button>\
                     <input type="text" value=' + goodsNumV + ' class="num">\
                     <button onclick="add(this)">+</button></td>\
                  <td><button onclick = "del(this)">删除</button></td>'

      tbody.appendChild(tr);
      changeColor()
      // sum();
    }
    // 删除
    function del(ele) {
      ele.parentNode.parentNode.remove();
      changeColor()
      // sum();
    }
    // 全选全不选 
    all.onclick = function () {
      var danxuan = document.getElementsByName('danxuan');
      for (var i = 0; i < danxuan.length; i++) {
        if (all.checked) {
          danxuan[i].checked = true;
        } else {
          danxuan[i].checked = false;
        }
      }
      sum2();
    }
    // 隔行变色
    function changeColor() {
      var tr = tbody.getElementsByTagName('tr');
      for (var i = 0; i < tr.length; i++) {
        if (i % 2 == 0) {
          tr[i].style.backgroundColor = '#ddd';
        } else {
          tr[i].style.backgroundColor = '#aaa';
        }
      }
    }
    // 选中删除
    checkDel.onclick = function () {
      var danxuan = document.getElementsByName('danxuan');
      for (var i = 0; i < danxuan.length; i++) {
        if (danxuan[i].checked) {
          danxuan[i].parentNode.parentNode.remove();
          i--;
        }
      }
      changeColor();
      // sum();
    }
    // 总价格 
    function sum() {
      var num = document.getElementsByClassName('num');
      var sum = document.getElementById('sum');
      var sum1 = 0;
      for (var i = 0; i < num.length; i++) {
        var price = num[i].parentNode.previousElementSibling.innerHTML;
        sum1 += price * num[i].value;
      }
      sum.innerHTML = sum1;
    }
    // 选中计算总价格
    function sum2() {
      var danxuan = document.getElementsByName('danxuan');
      var sum = document.getElementById('sum');
      var sum2 = 0;
      for (var i = 0; i < danxuan.length; i++) {
        if (danxuan[i].checked) {
          var price = danxuan[i].parentNode.nextElementSibling.nextElementSibling.innerHTML;
          var num = danxuan[i].parentNode.nextElementSibling.nextElementSibling.nextElementSibling.firstElementChild.nextElementSibling.value;
          sum2 += num * price;
        }
      }
      sum.innerHTML = sum2;
    }
    // 加
    function add(ele) {
      var num = ele.previousElementSibling.value;
      num++;
      ele.previousElementSibling.value = num;
      // sum();
    }
    // 减
    function jian(ele) {
      var num = ele.nextElementSibling.value;
      num--;
      if (num == 0) {
        alert('已经不能再减少了，么么哒');
        return
      }
      ele.nextElementSibling.value = num;
      // sum();
    }
    tbody.addEventListener('click', function (e) {
      var ev = e || window.event;
      var target = ev.target || ev.srcElement;
      if (target.name === 'danxuan') {
        sum2()
      }
    }, false)
    changeColor();
    // sum();
  </script>

</body>

</html>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。
禁止转载，如需转载请通过简信或评论联系作者。