原生购物车

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>购物车</title>
    <style></style>
  </head>
  <body>
    <table>
      <caption>
        <h2>我的购物车</h2>
      </caption>
      <thead>
        <th>
          <input type="checkbox" name="checkAll" id="checkAll" checked />
          <label for="checkAll">全选</label>
        </th>
        <th>图片</th>
        <th>品名</th>
        <th>单位</th>
        <th>单价/元</th>
        <th>数量</th>
        <th>金额/元</th>
      </thead>
      <tbody>
        <tr>
          <td>
            <input type="checkbox" name="item" class="item" checked />
          </td>
          <td>
            <img src="images/p1.png" />
          </td>
          <td>JavaScript权威指南（第七版）</td>
          <td>本</td>
          <td>100</td>
          <td>
            <input type="number" class="num" min="1" value="1" />
          </td>
          <td class="amount">0</td>
        </tr>
        <tr>
          <td>
            <input type="checkbox" name="item" class="item" checked />
          </td>
          <td>
            <img src="images/p2.png" />
          </td>
          <td>JavaScript权威指南（第七版）</td>
          <td>本</td>
          <td>200</td>
          <td>
            <input type="number" class="num" min="1" value="1" />
          </td>
          <td class="amount">0</td>
        </tr>
        <tr>
          <td>
            <input type="checkbox" name="item" class="item" checked />
          </td>
          <td>
            <img src="images/p3.png" />
          </td>
          <td>JavaScript权威指南（第七版）</td>
          <td>本</td>
          <td>300</td>
          <td>
            <input type="number" class="num" min="1" value="1" />
          </td>
          <td class="amount">0</td>
        </tr>
        <tr>
          <td>
            <input type="checkbox" name="item" class="item" checked />
          </td>
          <td>
            <img src="images/p4.png" />
          </td>
          <td>JavaScript权威指南（第七版）</td>
          <td>本</td>
          <td>400</td>
          <td>
            <input type="number" class="num" min="1" value="1" />
          </td>
          <td class="amount">0</td>
        </tr>
        <tr>
          <td>
            <input type="checkbox" name="item" class="item" />
          </td>
          <td>
            <img src="images/p5.png" />
          </td>
          <td>JavaScript权威指南（第七版）</td>
          <td>本</td>
          <td>500</td>
          <td>
            <input type="number" class="num" min="1" value="1" />
          </td>
          <td class="amount">0</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td colspan="5">总计</td>
          <td>0</td>
          <td>0</td>
        </tr>
      </tfoot>
    </table>
    <script src="demo.js"></script>
  </body>
</html>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  font-size: 10px;
}
body {
  font-size: 1.6rem;
}
/* table样式 */
/* 表格*/
table {
  margin: 0 auto;
  border-collapse: collapse;
}
input,
label:hover {
  cursor: pointer;
}
/* 隔行变色 */
tr:nth-of-type(even) {
  background-color: gainsboro;
}
caption {
  margin: 1rem 0;
}
/* tbody样式 */
thead {
  background-color: green;
  color: white;
}
tfoot {
  background-color: lightblue;
}
/* 设置边框线 */
th,
td {
  text-align: center;
  padding: 1rem;
}
/* 图片大小 */
td > img {
  width: 3em;
  height: 3em;
}

/**
 * 当页面加载成功后计算选中商品的价格和数目
 * */
window.onload = autoCalculate;
//获取“全选"按钮元素
let checkAllBtn = document.querySelector("#checkAll");
//获取多选框元素
let checkBoxArr = document.querySelectorAll("input[name='item']");
/**
 * 全选与全不选
 */
// checkAllBtn.onclick = function (ev) {
//   checkBoxArr.forEach(function (item) {
//     item.checked = ev.target.checked;
//   });
// };
//上面注释的简化形式
checkAllBtn.onclick = (ev) =>
  checkBoxArr.forEach((item) => (item.checked = ev.target.checked));
//每次点击也要计算一次数据
checkAllBtn.onchange = autoCalculate;
/**
 * 只有一个没有选中，全选框就不选中
 */
checkBoxArr.forEach(function (item) {
  item.onclick = function () {
    let res = [...checkBoxArr].every(function (ite) {
      return ite.checked;
    });
    checkAllBtn.checked = res;
  };
  //每次点击也要计算一次数据
  item.onchange = autoCalculate;
});
// 获取产品单价元素
let tdPriceArr = document.querySelectorAll("tr >td:nth-of-type(5)");
let priceArr = [...tdPriceArr].map(function (ev) {
  return ev.textContent * 1;
});
//当数量发生变化的时候获取数量
let tdNumArr = document.querySelectorAll(".num");
//当每一个数量框发生变化时调用方法autoCalculate
tdNumArr.forEach(function (ev) {
  ev.onchange = autoCalculate;
});
function autoCalculate() {
  let numArr = [...tdNumArr].map(function (item) {
    return item.value * 1;
  });
  //   let p = [numArr, priceArr].reduce(function (prev, curr) {
  //     let a = prev.map(function (item, index) {
  //       return item * curr[index];
  //     });
  //     return a;
  //   });
  //上面注释的简化
  //   计算每种商品的消耗的总金额，数量*单价
  let o = [numArr, priceArr].reduce((prev, curr) =>
    prev.map((item, index) => item * curr[index])
  );
  //   将价格放到每款产品后面
  let price = document.querySelectorAll(".amount");
  price.forEach(function (items, index) {
    items.textContent = o[index];
  });
  /**
   * 给总计赋值
   * 获取选中的tr,如果没有选中的tr则默认总计的地方都为0
   */
  let totleNum = document.querySelector("tfoot > tr > td:nth-of-type(2)");
  let totlePrice = document.querySelector("tfoot > tr > td:nth-of-type(3)");
  let checkArr = document.querySelectorAll("input[name='item']:checked");
  //   console.log(checkArr.length);
  if (checkArr.length > 0) {
    // 获取选中的tr里面的价格
    let pricecarr = [...checkArr].map(function (ev) {
      return (
        ev.parentNode.parentNode.querySelector("td:nth-of-type(5)")
          .textContent * 1
      );
    });
    // 获取选中的tr里面的数量
    let numcarr = [...checkArr].map(function (ev) {
      return ev.parentNode.parentNode.querySelector(".num").value * 1;
    });
    let c = [numcarr, pricecarr].reduce((prev, curr) =>
      prev.map((item, index) => item * curr[index])
    );
    //总计里面的数据只计算选中的，不选中的不计算
    totleNum.textContent = numcarr.reduce(function (prev, curr) {
      return prev + curr;
    });
    totlePrice.textContent = c.reduce(function (prev, curr) {
      return prev + curr;
    });
  } else {
    totleNum.textContent = 0;
    totlePrice.textContent = 0;
  }
}

相关文章