js纯操作dom版购物车（实现购物车功能）_javascript及网页特效dom操作扩展练习怎么百度换肤和购物车-优快云博客

本文链接：https://blog.youkuaiyun.com/yyyyyyysc/article/details/143233477
代码：
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      tr {
        display: block;
        border-bottom: 1px dotted #dcdcdc;
      }
      td {
        width: 100px;
        text-align: center;
      }
      img {
        width: 80px;
        height: 80px;
      }
      input {
        width: 30px;
        text-align: center;
      }
      .bottom {
        width: 640px;
        height: 80px;
        line-height: 80px;
        margin-top: 10px;
        border: 1px solid #dcdcdc;
      }
      .qjs {
        width: 80px;
        height: 50px;
        background-color: red;
        color: white;
        font-size: 16px;
        border: 0;
        margin-left: 15px;
      }
      .jq::after {
        content: "￥";
      }
      .xj::after {
        content: "￥";
      }
      .del {
        cursor: pointer;
      }
      .del:hover{
        color: red;
      }
      .alldel {
        padding-left: 16px;
        cursor: pointer;
      }
      .red {
        color: red;
      }
      .alldel:hover {
        color: red;
      }
      .qlc {
        cursor: pointer;
      }
      .qlc:hover {
        color: red;
      }
      .trtop{
        height: 40px;
      }
      .spzj{
        margin-left: 95px;
      }
    </style>
  </head>
  <body>
    <table class="tabzong">
      <tr class="trtop">
        <td><input type="checkbox" class="allchecked" />全选</td>
        <td>商品</td>
        <td>单价</td>
        <td>商品数量</td>
        <td>小计</td>
        <td>操作</td>
      </tr>
      <tr>
        <td><input type="checkbox" class="dx" /></td>
        <td>
          <img
            src="https://img.alicdn.com/i2/2204920870409/O1CN01mobmIm1EtMniYVU0J_!!2204920870409.jpg"
            alt=""
          />
        </td>
        <td class="jq">5</td>
        <td>
          <button class="jian" disabled>-</button
          ><input type="text" value="1" /><button class="jia">+</button>
        </td>
        <td class="xj">5</td>
        <td class="del">删除</td>
      </tr>
      <tr>
        <td><input type="checkbox" class="dx" /></td>
        <td>
          <img
            src="https://imgservice.suning.cn/uimg1/b2c/image/gKRneKhFHGnB1oh0Imoxcg.jpg_800w_800h_4e"
            alt=""
          />
        </td>
        <td class="jq">3</td>
        <td>
          <button class="jian" disabled>-</button
          ><input type="text" value="1" /><button class="jia">+</button>
        </td>
        <td class="xj">3</td>
        <td class="del">删除</td>
      </tr>
      <tr>
        <td><input type="checkbox" class="dx" /></td>
        <td>
          <img
            src="https://imgservice.suning.cn/uimg1/b2c/image/ZzNpZsy4U3v8WgTbKqfN3A.jpg_800w_800h_4e"
            alt=""
          />
        </td>
        <td class="jq">10</td>
        <td>
          <button class="jian" disabled>-</button
          ><input type="text" value="1" /><button class="jia">+</button>
        </td>
        <td class="xj">10</td>
        <td class="del">删除</td>
      </tr>
      <tr>
        <td><input type="checkbox" class="dx" /></td>
        <td>
          <img
            src="https://img2.baidu.com/it/u=4280167200,1529131522&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1066"
            alt=""
          />
        </td>
        <td class="jq">20</td>
        <td>
          <button class="jian" disabled>-</button
          ><input type="text" value="1" /><button class="jia">+</button>
        </td>
        <td class="xj">20</td>
        <td class="del">删除</td>
      </tr>
    </table>
    <div class="bottom">
      <span style="margin-right: 30px" class="alldel">删除所选商品</span>
      <span class="qlc">清理购物车</span>
      <span class="spzj"
        >已经选中<span class="red">0</span>件商品总价:
        <span class="red">0￥</span></span
      >
      <button class="qjs">去结算</button>
    </div>
  </body>
  <script>
    // 第二种方式
    let body = document.body;
    let qlc = document.querySelector(".qlc");
    qlc.onclick = function () {
      body.innerHTML = `
            <table class="tabzong">
                <tr>
                    <td><input type="checkbox" class="allchecked">全选</td>
                    <td>商品</td>
                    <td>单价</td>
                    <td>商品数量</td>
                    <td>小计</td>
                    <td>操作</td>
                </tr>
                <tr>
                    <td><input type="checkbox" class="dx"></td>
                    <td><img src="https://img.alicdn.com/i2/2204920870409/O1CN01mobmIm1EtMniYVU0J_!!2204920870409.jpg" alt=""></td>
                    <td class="jq">5</td>
                    <td><button class="jian" disabled>-</button><input type="text" value="1"><button class="jia">+</button></td>
                    <td class="xj">5</td>
                    <td class="del">删除</td>
                </tr>
                <tr>
                    <td><input type="checkbox" class="dx"></td>
                    <td><img src="https://imgservice.suning.cn/uimg1/b2c/image/gKRneKhFHGnB1oh0Imoxcg.jpg_800w_800h_4e" alt=""></td>
                    <td class="jq">3</td>
                    <td><button class="jian" disabled>-</button><input type="text" value="1"><button class="jia">+</button></td>
                    <td class="xj">3</td>
                    <td class="del">删除</td>
                </tr>
                <tr>
                    <td><input type="checkbox" class="dx"></td>
                    <td><img src="https://imgservice.suning.cn/uimg1/b2c/image/ZzNpZsy4U3v8WgTbKqfN3A.jpg_800w_800h_4e" alt=""></td>
                    <td class="jq">10</td>
                    <td><button class="jian" disabled>-</button><input type="text" value="1"><button class="jia">+</button></td>
                    <td class="xj">10</td>
                    <td class="del">删除</td>
                </tr>
                <tr>
                    <td><input type="checkbox" class="dx"></td>
                    <td><img src="https://img2.baidu.com/it/u=4280167200,1529131522&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1066" alt=""></td>
                    <td class="jq">20</td>
                    <td><button class="jian" disabled>-</button><input type="text" value="1"><button class="jia">+</button></td>
                    <td class="xj">20</td>
                    <td class="del">删除</td>
                </tr>
                
            </table>
            <div class="bottom">
                <span style="margin-right: 30px;" class="alldel">删除所选商品</span>
                <span class="qlc">清理购物车</span>
                <span style="margin-left: 110px;" class="spzj">已经选中<span class="red">0</span>件商品总价: <span class="red">0￥</span></span>
                <button class="qjs">去结算</button>
            </div>

        `;
      z();
    };
    z();
    function z() {
      let body = document.body;
      let qlc = document.querySelector(".qlc");
      qlc.onclick = function () {
        body.innerHTML = `
            <table class="tabzong">
                <tr>
                    <td><input type="checkbox" class="allchecked">全选</td>
                    <td>商品</td>
                    <td>单价</td>
                    <td>商品数量</td>
                    <td>小计</td>
                    <td>操作</td>
                </tr>
                <tr>
                    <td><input type="checkbox" class="dx"></td>
                    <td><img src="https://img.alicdn.com/i2/2204920870409/O1CN01mobmIm1EtMniYVU0J_!!2204920870409.jpg" alt=""></td>
                    <td class="jq">5</td>
                    <td><button class="jian" disabled>-</button><input type="text" value="1"><button class="jia">+</button></td>
                    <td class="xj">5</td>
                    <td class="del">删除</td>
                </tr>
                <tr>
                    <td><input type="checkbox" class="dx"></td>
                    <td><img src="https://imgservice.suning.cn/uimg1/b2c/image/gKRneKhFHGnB1oh0Imoxcg.jpg_800w_800h_4e" alt=""></td>
                    <td class="jq">3</td>
                    <td><button class="jian" disabled>-</button><input type="text" value="1"><button class="jia">+</button></td>
                    <td class="xj">3</td>
                    <td class="del">删除</td>
                </tr>
                <tr>
                    <td><input type="checkbox" class="dx"></td>
                    <td><img src="https://imgservice.suning.cn/uimg1/b2c/image/ZzNpZsy4U3v8WgTbKqfN3A.jpg_800w_800h_4e" alt=""></td>
                    <td class="jq">10</td>
                    <td><button class="jian" disabled>-</button><input type="text" value="1"><button class="jia">+</button></td>
                    <td class="xj">10</td>
                    <td class="del">删除</td>
                </tr>
                <tr>
                    <td><input type="checkbox" class="dx"></td>
                    <td><img src="https://img2.baidu.com/it/u=4280167200,1529131522&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1066" alt=""></td>
                    <td class="jq">20</td>
                    <td><button class="jian" disabled>-</button><input type="text" value="1"><button class="jia">+</button></td>
                    <td class="xj">20</td>
                    <td class="del">删除</td>
                </tr>
                
            </table>
            <div class="bottom">
                <span style="margin-right: 30px;" class="alldel">删除所选商品</span>
                <span class="qlc">清理购物车</span>
                <span style="margin-left: 110px;" class="spzj">已经选中<span class="red">0</span>件商品总价: <span class="red">0￥</span></span>
                <button class="qjs">去结算</button>
            </div>

        `;
        z();
      };
      let dx = document.querySelectorAll(".dx");
      let allchecked = document.querySelector(".allchecked");
      // 小计
      let xj = document.querySelectorAll(".xj");
      // 商品总价
      let spzj = document.querySelector(".spzj");
      allchecked.onclick = function () {
        dx.forEach((item) => {
          item.checked = allchecked.checked;
          if (item.checked) {         
            item.parentNode.parentNode.style.background='#eeeeee'
          } else {
            item.parentNode.parentNode.style.background='white'
          }
        });
        if(allchecked.checked){
            x=dx.length
        }else{
            x=0
        }
        add();
      };
      // 总价
      let zongjia = 0;
      // 商品数量
      let x = 0;

      dx.forEach((item) => {
        item.onclick = function () {
          if (item.checked) {
            x++;
            zongjia +=
              +item.parentNode.nextElementSibling.nextElementSibling
                .nextElementSibling.nextElementSibling.innerText;
            item.parentNode.parentNode.style.background='#eeeeee'
          } else {
            x--;
            zongjia -=
              +item.parentNode.nextElementSibling.nextElementSibling
                .nextElementSibling.nextElementSibling.innerText;
            item.parentNode.parentNode.style.background='white'

          }

          spzj.innerHTML = `已经选中<span class="red">${x}</span>件商品总价: <span class="red">${zongjia}￥</span></span>`;
        //   单选控制全选
          let alltype = true;
          dx.forEach((dxitem) => {
            if (!dxitem.checked) {
              alltype = false;
            }
          });

          allchecked.checked = alltype;
        };
      });

      // 总价函数
      function add() {
        zongjia = 0;
        let dx = document.querySelectorAll(".dx");
        x=0
        dx.forEach((item) => {
          if (item.checked) {
            x++
            zongjia +=
              +item.parentNode.nextElementSibling.nextElementSibling
                .nextElementSibling.nextElementSibling.innerText;
          }
        });

        spzj.innerHTML = `已经选中<span class="red">${x}</span>件商品总价: <span class="red">${zongjia}￥</span></span>`;
      }
      // 清理购物车
      // 第一种方式
      // let qlc = document.querySelector('.qlc')
      // qlc.onclick=function(){
      //     location.reload();
      // }

      // 第二种方式

      let jian = document.querySelectorAll(".jian");
      let jia = document.querySelectorAll(".jia");
      jian.forEach((item) => {
        item.onclick = function () {
          if (--item.nextElementSibling.value > 1) {
            item.parentNode.nextElementSibling.innerText =
              item.nextElementSibling.value *
              item.parentNode.previousElementSibling.innerText;
            add();
          } else {
            item.parentNode.nextElementSibling.innerText =
              item.nextElementSibling.value *
              item.parentNode.previousElementSibling.innerText;

            item.disabled = true;
            add();
          }
        };
      });
      jia.forEach((item) => {
        item.onclick = function () {
          if (+item.previousElementSibling.value == 5) {
            alert("最多只能买5件");
          } else {
            item.previousElementSibling.value++;
            item.parentNode.nextElementSibling.innerText =
              item.previousElementSibling.value *
              item.parentNode.previousElementSibling.innerText;
            console.log(item.parentNode.nextElementSibling.innerText);
            item.previousElementSibling.previousElementSibling.disabled = false;

            add();
          }
        };
      });

      // 删除
      let del = document.querySelectorAll(".del");
      del.forEach((item) => {
        item.onclick = function () {
          item.parentNode.remove();
            add();

        };
      });
      // 删除所选
      let alldel = document.querySelector(".alldel");
      alldel.onclick = function () {
        dx.forEach((dxitem) => {
          if (dxitem.checked) {
            dxitem.parentNode.parentNode.remove();
          }
        });
        add();
      };
    }
  </script>
</html>
效果图：