动态表格带小计和大计

2024-01-12 00:48:24

导言

数据表格是显示和组织数据的一种有用方式。有时，您可能需要创建一个能够计算小计和大计的动态表格。本教程将指导您使用 HTML、CSS 和 JavaScript 创建此类表格。

创建表格

首先，我们需要使用 HTML 创建一个基本表格。

<table>
  <thead>
    <tr>
      <th>项目</th>
      <th>数量</th>
      <th>单价</th>
      <th>小计</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>商品 1</td>
      <td>10</td>
      <td>10.00</td>
      <td>100.00</td>
    </tr>
    <tr>
      <td>商品 2</td>
      <td>5</td>
      <td>15.00</td>
      <td>75.00</td>
    </tr>
    <tr>
      <td>商品 3</td>
      <td>8</td>
      <td>12.00</td>
      <td>96.00</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th colspan="3">本页小计：</th>
      <td id="subtotal">271.00</td>
    </tr>
    <tr>
      <th colspan="3">累计：</th>
      <td id="total">271.00</td>
    </tr>
  </tfoot>
</table>

此表格包含一个标题行，一个主体部分，用于输入数据，以及一个页脚，其中显示本页小计和大计。

添加和删除行

接下来，我们需要添加一个添加新行的按钮。

<button id="add-row">添加行</button>

我们还需要添加一个删除行的按钮。

<button id="remove-row">删除行</button>

计算小计和大计

现在，我们需要使用 JavaScript 来计算小计和大计。

const table = document.querySelector("table");
const subtotal = document.querySelector("#subtotal");
const total = document.querySelector("#total");

const addRow = document.querySelector("#add-row");
addRow.addEventListener("click", () => {
  // 创建新行
  const newRow = table.insertRow();

  // 创建新单元格
  const newCell1 = newRow.insertCell();
  const newCell2 = newRow.insertCell();
  const newCell3 = newRow.insertCell();
  const newCell4 = newRow.insertCell();

  // 添加新单元格的内容
  newCell1.innerHTML = "<input type='text' name='item[]'>";
  newCell2.innerHTML = "<input type='number' name='quantity[]'>";
  newCell3.innerHTML = "<input type='number' name='price[]'>";
  newCell4.innerHTML = "0.00";

  // 重新计算小计和大计
  calculateSubTotal();
  calculateTotal();
});

const removeRow = document.querySelector("#remove-row");
removeRow.addEventListener("click", () => {
  // 删除最后一行
  table.deleteRow(table.rows.length - 1);

  // 重新计算小计和大计
  calculateSubTotal();
  calculateTotal();
});

const calculateSubTotal = () => {
  let subTotal = 0;
  const rows = table.querySelectorAll("tbody tr");
  rows.forEach((row) => {
    const quantity = row.querySelector("input[name='quantity[]']").value;
    const price = row.querySelector("input[name='price[]']").value;
    subTotal += quantity * price;
  });

  subtotal.innerHTML = subTotal.toFixed(2);
};

const calculateTotal = () => {
  let grandTotal = 0;
  grandTotal += parseFloat(subtotal.innerHTML);
  total.innerHTML = grandTotal.toFixed(2);
};