jquery实现简易购物车

以下是一个使用jQuery实现的简易购物车示例。这个例子包括了添加商品到购物车、更新总计价格以及清空购物车的功能。

HTML 部分:

<table id="cartTable">
  <thead>
    <tr>
      <th>商品名称</th>
      <th>单价</th>
      <th>数量</th>
      <th>小计</th>
      <th>操作</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>
 
<button id="clearCart">清空购物车</button>
<div id="totalPrice">总计: ￥0.00</div>

CSS 部分:

table {
  width: 100%;
  border-collapse: collapse;
}
 
th, td {
  border: 1px solid #ddd;
  padding: 8px;
}
 
#clearCart {
  margin-top: 10px;
}
 
#totalPrice {
  margin-top: 10px;
  font-weight: bold;
}

jQuery 部分:

$(document).ready(function() {
  var cart = [];
 
  // 添加商品到购物车
  function addToCart(product) {
    cart.push(product);
    var row = '<tr><td>' + product.name + '</td><td>￥' + product.price + '</td><td>' + product.quantity + '</td><td>￥' + (product.price * product.quantity).toFixed(2) + '</td><td><button class="removeProduct" data-index="' + (cart.length - 1) + '">移除</button></td></tr>';
    $('#cartTable tbody').append(row);
    updateTotalPrice();
  }
 
  // 更新总计价格
  function updateTotalPrice() {
    var total = 0;
    cart.forEach(function(product) {
      total += product.price * product.quantity;
    });
    $('#totalPrice').text('总计: ￥' + total.toFixed(2));
  }
 
  // 移除商品
  $(document).on('click', '.removeProduct', function() {
    var index = $(this).data('index');
    cart.splice(index, 1);
    $(this).closest('tr').remove();
    updateTotalPrice();
  });
 
  // 模拟添加商品到购物车的操作
  $('#addProduct').click(function() {
    var productName = $('#productName').val();
    var productPrice = parseFloat($('#productPrice').val());
    var productQuantity = parseInt($('#productQuantity').val(), 10);
    addToCart({
      name: productName,
      price: productPrice,
      quantity: productQuantity
    });
  });
 
  // 清空购物车
  $('#clearCart').click(function() {
    cart = [];
    $('#cartTable tbody').empty();
    updateTotalPrice();
  });
});

这个购物车的实现包括了基本的购物车功能，如添加商品、移除商品、更新总价等。这个例子简单易懂，非常适合作为学习如何构建购物