JavaScript pc购物车 Css jQuery---实现

最新推荐文章于 2024-10-02 05:39:15 发布

你是安静的陈述

最新推荐文章于 2024-10-02 05:39:15 发布

阅读量403

点赞数

文章标签： javascript html css

本文链接：https://blog.csdn.net/m0_61561942/article/details/123174204

版权

本文详细介绍了如何使用JavaScript、HTML和CSS技术实现PC端的购物车功能。通过JavaScript处理用户交互，动态更新商品数量，结合HTML布局和CSS样式，创建了一个功能完善的购物车界面。

摘要由CSDN通过智能技术生成

<!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" />
    <title>Document</title>
    <link rel="stylesheet" href="../bootstrap-3.4.1-dist/bootstrap-3.4.1-dist/css/bootstrap-theme.min.css">
    <style>
        img {
            width: 100px;
            height: 100px;
            float: left;
        }
        .red {
            background-color: red;
        }
        .pink {
            background-color: pink;
        }
    </style>
  </head>
  <body>
    <div class="container">
      <table class="table">
          <thead>
              <tr>
                  <th><input type="checkbox" class="ckAll">全选</th>
                  <th>商品</th>
                  <th>单价</th>
                  <th>数量</th>
                  <th>小计</th>
                  <th>操作</th>
              </tr>
          </thead>
          <tbody>
            <tr>
                <td><input type="checkbox" class="ck"></td>
                <td>
                    <img sr