利用html来制作一个简单美观的购物车界面

简介

在网上购物的时候，购物车是必不可少的功能。因此，在这篇文章中，我们会详细介绍如何使用HTML来制作一个简单美观的购物车界面。

HTML代码结构

在开始之前，我们需要先确定购物车的基本结构。

HTML基本结构

在这个购物车应用中，我们需要使用以下HTML标签：

div：用于创建包含整个购物车的容器

table：用于展示购物车中的商品信息

td：用于创建每个单元格

tr：用于创建每个行

button：用于创建删除按钮

下面是一个基本的HTML结构：

<div class="cart">

  <table class="cart-table">
    <thead>
      <tr>
        <th>商品名称</th>
        <th>价格</th>
        <th>数量</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>商品1</td>
        <td>100</td>
        <td>1</td>
        <td><button class="delete-btn">删除</button></td>
      </tr>
      <tr>
        <td>商品2</td>
        <td>200</td>
        <td>2</td>
        <td><button class="delete-btn">删除</button></td>
      </tr>
    </tbody>
  </table>
</div>

这个基本结构包括一个用于包含整个购物车的div元素，以及一个用于显示商品信息的table元素。

CSS样式

现在我们需要添加一些CSS样式来美化购物车界面。下面是一些基本的CSS样式：

.cart {

  border: 1px solid #ccc;
  padding: 10px;
}
.cart-table {
  width: 100%;
  border-collapse: collapse;
}
.cart-table th {
  background-color: #f4f4f4;
  text-align: left;
  padding: 8px;
}
.cart-table td {
  border: 1px solid #ccc;
  padding: 8px;
}
.delete-btn {
  background-color: red;
  color: #fff;
  border: none;
  padding: 5px 10px;
  border-radius: 5px;
  cursor: pointer;
}

这些CSS样式为购物车添加了一些基本的样式，包括边框、背景颜色、文本对齐以及删除按钮的样式。

动态效果

现在，我们需要添加一些JavaScript代码来使购物车具有动态效果。

添加商品

在添加商品时，我们需要通过JavaScript代码来更新表格中的行。

function addToCart(name, price, quantity) {

  var tableBody = document.querySelector('.cart-table tbody');
  var newRow = document.createElement('tr');
  newRow.innerHTML = `
    <td>${name}</td>
    <td>${price}</td>
    <td>${quantity}</td>
    <td><button class="delete-btn">删除</button></td>
  `;
  tableBody.appendChild(newRow);
}

这个JavaScript代码使用了querySelector方法来获取到tbody元素，然后创建一个新的tr元素，并将HTML代码赋值给这个新的tr元素。接着，将这个新的tr元素添加到表格的tbody元素中。这样，就可以添加商品到购物车中了。

删除商品

在删除商品时，我们需要使用事件监听来注册按钮的点击事件，并且从DOM中删除相应的行。

document.querySelectorAll('.delete-btn').forEach(function(button) {

  button.addEventListener('click', function(event) {
    event.target.closest('tr').remove();
  });
});

这个JavaScript代码使用了querySelectorAll方法来获取所有的删除按钮。然后使用forEach方法遍历这些按钮，并通过addEventListener方法为它们注册点击事件。当按钮被点击时，会查找最近的父级tr元素并将其从DOM中删除。

总结

如此，我们就成功地使用HTML、CSS和JavaScript来创建了一个简单美观的购物车界面。