购物车——增删编程题

本文链接： https://blog.csdn.net/weixin_41282726/article/details/100051091

HTML模块为一个简化版的购物车，tbody为商品列表，tfoot为统计信息，系统会随机在列表中生成一些初始商品信息
1、请完成add函数，在列表后面显示items商品信息。参数items为{name: String, price: Number}组成的数组
2、请完成bind函数，点击每一行的删除按钮(包括通过add增加的行)，从列表中删除对应行
3、请注意同步更新统计信息，价格保留小数点后两位
4、列表和统计信息格式请与HTML示例保持一致
5、不要直接手动修改HTML中的代码
6、不要使用第三方库

<!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>
</head>

<body>
  <style>
    body,
    html {
      padding: 0;
      margin: 0;
      font-size: 14px;
      color: #000000;
    }

    table {
      border-collapse: collapse;
      width: 100%;
      table-layout: fixed;
    }

    thead {
      background: #3d444c;
      color: #ffffff;
    }

    td,
    th {
      border: 1px solid #e1e1e1;
      padding: 0;
      height: 30px;
      line-height: 30px;
      text-align: center;
    }
  </style>

  <table id="jsTrolley">
    <thead>
      <tr>
        <th>名称</th>
        <th>价格</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>产品1</td>
        <td>10.00</td>
        <td><a href="javascript:void(0);">删除</a></td>
      </tr>
      <tr>
        <td>产品2</td>
        <td>30.20</td>
        <td><a href="javascript:void(0);">删除</a></td>
      </tr>
      <tr>
        <td>产品3</td>
        <td>20.50</td>
        <td><a href="javascript:void(0);">删除</a></td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <th>总计</th>
        <td colspan="2">60.70(3件商品)</td>
      </tr>
    </tfoot>
  </table>
</body>

</html>
<script type="text/javascript">
  function add(items) {
    var tbody = document.getElementsByTagName('tbody')[0];
    for (var i = 0; i < items.length; i++) {
      var tr = document.createElement('tr');
      var td1 = document.createElement('td'); //商品
      td1.innerText = items[i].name;
      tr.appendChild(td1);
      var td2 = document.createElement('td'); //价格
      var price = parseFloat(items[i].price);
      td2.innerText = price.toFixed(2);
      tr.appendChild(td2);
      var td3 = document.createElement('td'); //价格
      td3.innerHTML = '<a href="javascript:void(0);">删除</a>';
      tr.appendChild(td3);
      tbody.appendChild(tr);
      cal();
    }
  }

  //   function bind(){
  //     var lis = document.getElementsByTagName('a');
  //     for(var i=0;i<lis.length;i++){
  //       lis[i].οnclick=fn;
  //       cal();
  //     }
  //     function fn(){
  //       var tbody = document.getElementsByTagName('tbody')[0]; 
  //       tbody.removeChild(this.parentNode.parentNode);
  //   }
  //  }

  //事件委托
  function bind() {
    var tbody = document.querySelector('tbody');
    tbody.addEventListener("click", function (e) {
      e = e || window.event;
      // console.log(e.target);
      if (e.target.tagName !== 'A') {
        return;
      }
      tbody.removeChild(e.target.parentNode.parentNode);
      cal();
    })
  }

  function cal() {
    var total_price = 0;
    var lens = document.querySelectorAll('tbody tr');
    var num = lens.length;
    var td = document.querySelector('tfoot td');
    for (var i = 0; i < num; i++) {
      total_price += parseFloat(lens[i].querySelectorAll('td')[1].innerText);
    }
    td.innerText = total_price.toFixed(2) + '(' + num + '件商品)';
  }
  var items = [{
    name: '产品4',
    price: '20.00'
  }, {
    name: '产品5',
    price: '10.00'
  }]
  add(items);
  bind();
</script>

购物车——增删编程题

猜你喜欢