简单购物车的网页代码示例

<!DOCTYPE html>
<html>
<head>
  <title>购物车</title>
  <style>
    table {
      width: 100%;
      border-collapse: collapse;
    }
    th, td {
      padding: 8px;
      text-align: left;
      border-bottom: 1px solid #ddd;
    }
    .total {
      font-weight: bold;
    }
  </style>
</head>
<body>
  <h1>购物车</h1>
  <table>
    <tr>
      <th>商品</th>
      <th>价格</th>
      <th>数量</th>
      <th>小计</th>
      <th></th>
    </tr>
    <tr>
      <td>商品1</td>
      <td>$10</td>
      <td><input type="number" value="1" min="1"></td>
      <td class="subtotal">$10</td>
      <td><button class="remove">移除</button></td>
    </tr>
    <tr>
      <td>商品2</td>
      <td>$20</td>
      <td><input type="number" value="1" min="1"></td>
      <td class="subtotal">$20</td>
      <td><button class="remove">移除</button></td>
    </tr>
    <tr class="total">
      <td></td>
      <td></td>
      <td></td>
      <td>总计: $30</td>
      <td></td>
    </tr>
  </table>
  <script>
    // 获取所有移除按钮
    var removeButtons = document.getElementsByClassName('remove');

    // 给每个移除按钮添加点击事件监听器
    for (var i = 0; i < removeButtons.length; i++) {
      removeButtons[i].addEventListener('click', function() {
        var row = this.parentNode.parentNode;
        row.parentNode.removeChild(row);
        updateTotal();
      });
    }

    // 获取所有数量输入框
    var quantityInputs = document.querySelectorAll('input[type="number"]');

    // 给每个数量输入框添加更改事件监听器
    for (var i = 0; i < quantityInputs.length; i++) {
      quantityInputs[i].addEventListener('change', function() {
        var quantity = this.value;
        var price = this.parentNode.previousElementSibling.innerText.replace('$', '');
        var subtotal = quantity * price;
        this.parentNode.nextElementSibling.innerText = '$' + subtotal;
        updateTotal();
      });
    }

    // 更新总计
    function updateTotal() {
      var subtotals = document.getElementsByClassName('subtotal');
      var total = 0;
      for (var i = 0; i < subtotals.length; i++) {
        total += parseFloat(subtotals[i].innerText.replace('$', ''));
      }
      document.getElementsByClassName('total')[0].lastElementChild.innerText = '总计: $' + total;
    }
  </script>
</body>
</html>