JavaScript表格数据实时计算与更新：事件委托实践-js教程-PHP中文网

JavaScript表格数据实时计算与更新：事件委托实践

本教程详细阐述了如何利用javascript的事件委托机制，实现表格中单行商品总价和整体订单总价的实时计算与更新。通过监听表格的`input`事件，我们能够即时响应用户对单价和数量的修改，自动更新相关字段，显著提升用户体验，并提供了负值输入的校验与处理方法。

在现代Web应用中，实时反馈是提升用户体验的关键。对于包含可编辑数值的表格，例如订单系统中的商品单价和数量，用户期望在输入数据后立即看到总价的更新，而不是点击一个额外的“计算”按钮。本教程将指导您如何使用JavaScript实现这一功能，通过事件委托机制优化性能，并确保数据的有效性。

理解问题与解决方案核心

原始的实现方式依赖于一个显式的“Calculate Grand Total Price”按钮来触发所有计算。这种模式导致用户在每次修改单价或数量后，都需要手动点击按钮才能看到更新，降低了交互效率。

我们的目标是：

当用户修改任一行的“Unit Price”（单价）或“Quantity”（数量）时，该行的“Total”（总计）立即更新。
所有行的“Total”更新后，表格底部的“Grand Total”（总订单价）也立即更新。
移除不必要的“Calculate Grand Total Price”按钮，实现完全自动化。

为了实现这一目标，我们将采用事件委托（Event Delegation）技术，在表格的父元素上监听input事件，而不是为每个输入框单独添加事件监听器。

立即学习“Java免费学习笔记（深入）”；

HTML结构分析

首先，我们来看一下表格的HTML结构。这是一个典型的订单表格，包含多行商品信息，每行有单价、数量和总价的输入框。

<table id="myTable">
  <thead>
    <tr>
      <th>No.</th>
      <th>Book Title</th>
      <th>Author</th>
      <th>Category</th>
      <th>Unit Price</th>
      <th>Quantity</th>
      <th>Total</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="No">1</td>
      <td><input type="text" value=""></td>
      <td><input type="text" value=""></td>
      <td>
        <select>
          <option value="Please choose the category..." disabled selected>Please choose the category...</option>
          <option value="Business">Business</option>
          <option value="Fiction">Fiction</option>
          <option value="Mathematics">Mathematics</option>
          <option value="Technology">Technology</option>
        </select>
      </td>
      <!-- Unit Price, Quantity, Total 是我们关注的输入框 -->
      <td class="price"><input type="number" value="0.00"></td>
      <td class="quantity"><input type="number" value="0"></td>
      <td class="total"><input type="number" value="0.00" disabled></td>
    </tr>
    <!-- 更多行... -->
  </tbody>
  <tfoot>
    <tr>
      <td class="background-colour" colspan="5">
        <!-- 原始的计算按钮将从这里移除 -->
      </td>
      <td class="background-colour" colspan="2">
        <!-- 总订单价显示在这里 -->
        <input type="number" name="Grand Total Price" value="0.00" class="GrandTotal" disabled>
      </td>
    </tr>
  </tfoot>
</table>

登录后复制

关键点：

ViiTor实时翻译

AI实时多语言翻译专家！强大的语音识别、AR翻译功能。

116

查看详情

整个表格有一个id="myTable"，我们将在这个ID上绑定事件监听器。
每行的“Unit Price”输入框位于td元素内，该td带有class="price"。
每行的“Quantity”输入框位于td元素内，该td带有class="quantity"。
每行的“Total”输入框位于td元素内，该td带有class="total"，并且通常设置为disabled，因为它是由计算生成的。
总订单价输入框带有class="GrandTotal"。

JavaScript实现：事件委托与实时计算

我们将修改JavaScript代码，实现事件委托和实时计算逻辑。

// 确保DOM完全加载后再执行脚本
window.addEventListener("DOMContentLoaded", () => {
  // 对整个表格 #myTable 绑定 'input' 事件监听器
  // 'input' 事件会在 <input>, <select>, <textarea> 的值改变时触发
  document.getElementById("myTable").addEventListener("input", () => {
    let rows = document.querySelectorAll("tbody tr"); // 获取所有数据行
    let negativeValuesDetected = false; // 标记是否检测到负值

    // 使用Array.from或展开运算符将NodeList转换为数组，以便使用map和reduce
    let grandTotal = Array.from(rows).map(row => {
      // 获取当前行中的单价、数量和总计输入框
      let quantityInput = row.querySelector(".quantity input");
      let priceInput = row.querySelector(".price input");
      let totalInput = row.querySelector(".total input");

      // 解析输入值，确保它们是数字
      let quantity = parseInt(quantityInput.value) || 0; // 如果解析失败，默认为0
      let price = parseFloat(priceInput.value) || 0.00; // 如果解析失败，默认为0.00

      // 负值输入校验与处理
      if (quantity < 0 || price < 0) {
        negativeValuesDetected = true; // 标记存在负值
        quantity = 0; // 将数量重置为0
        price = 0.00; // 将价格重置为0.00
        quantityInput.value = "0"; // 更新输入框显示
        priceInput.value = "0.00"; // 更新输入框显示
      }

      // 计算当前行的总价
      let total = quantity * price;
      totalInput.value = total.toFixed(2); // 更新当前行的总计输入框，保留两位小数

      return total; // 返回当前行的总价，供后续累加
    }).reduce((accumulator, currentValue) => accumulator + currentValue, 0); // 累加所有行的总价得到Grand Total

    // 更新总订单价显示
    document.querySelector(".GrandTotal").value = grandTotal.toFixed(2);

    // 如果检测到负值，则弹出警告
    if (negativeValuesDetected) {
      alert("不允许输入负值！已自动重置为零。");
    }
  });
});

登录后复制

代码解析：

window.addEventListener("DOMContentLoaded", ...): 确保在整个HTML文档加载并解析完毕后才执行JavaScript代码，避免因DOM元素未加载而导致的错误。
document.getElementById("myTable").addEventListener("input", ...): 这是事件委托的核心。我们将input事件监听器直接附加到ID为myTable的表格元素上。这意味着，无论表格内的哪个input、select或textarea元素的值发生变化，这个事件监听器都会被触发。
let rows = document.querySelectorAll("tbody tr");: 获取表格tbody中所有的行元素。
Array.from(rows).map(...):
- Array.from(rows) 将NodeList转换为真正的数组，这样我们就可以使用map、filter、reduce等数组方法。
- map方法遍历每一行，并对每行执行计算逻辑。
- 在map回调函数中，我们获取当前行的“Quantity”、“Price”和“Total”输入框。
- parseInt() 和 parseFloat() 用于将输入框的值转换为数字。为了健壮性，使用了|| 0或|| 0.00来处理可能出现的非数字输入，将其默认为0。
- 负值校验：如果数量或单价为负数，我们将其重置为0，更新输入框的显示，并设置negativeValuesDetected标志。
- 计算total = quantity * price，并使用toFixed(2)格式化为两位小数后更新到totalInput.value。
- map方法最终返回一个包含所有行总价的数组。
.reduce((accumulator, currentValue) => accumulator + currentValue, 0): 紧接着map方法，reduce方法用于将map返回的行总价数组累加起来，得到grandTotal。初始累加值为0。
document.querySelector(".GrandTotal").value = grandTotal.toFixed(2);: 更新总订单价输入框的显示。
if (negativeValuesDetected) { alert("..."); }: 如果在任何一行中检测到负值，则弹出警告。

CSS样式（保持不变）

CSS代码主要负责表格的布局和样式，它不直接影响计算逻辑，但对于用户界面的美观性和可读性至关重要。原始的CSS代码已经提供了良好的基础样式，可以继续使用。

table,td {
    padding: 0.5rem;
    border: 3px solid;
    border-collapse:collapse;
}

h1 {
    font-family: 'Ubuntu', cursive;
}

th {
    background-color: skyblue;
    font-weight: bold;
    padding: 0.5rem;
    border: 3px solid;
    border-collapse:collapse;
}

tbody {
    background-color: white;
}

.No {
    text-align: right;
}

td:nth-child(7) input[type="number"]{
    text-align: right; background-color: silver;
}

td:nth-child(6) input[type="number"]{
    text-align: right;
}

td:nth-child(5) input[type="number"]{
    text-align: right;
}

tfoot tr td:last-child input[type="number"]{
    text-align: right;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

tfoot {
    font-weight: bold;
}

/* .Button 类已不再需要，因为我们移除了按钮 */

.GrandTotal {
    background-color: silver;
    font-size: 18pt;
    float:right;
}

tr:hover {
    background-color: yellow;
}

.background-colour {
    background-color: skyblue;
}

body {
    background-color: lemonchiffon;
}

登录后复制

最终HTML调整

由于总计是实时更新的，原有的“Calculate Grand Total Price”按钮就不再需要了。我们需要从tfoot部分移除这个按钮。

<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>Book Ordering System</title>
    <link rel="stylesheet" href="CSS/book-order.css">
    <script src="book-order.js"></script>
</head>
<body>
    <h1>Book Ordering System</h1>

    <table id="myTable">
        <thead>
            <tr>
                <th>No.</th>
                <th>Book Title</th>
                <th>Author</th>
                <th>Category</th>
                <th>Unit Price</th>
                <th>Quantity</th>
                <th>Total</th>
            </tr>
        </thead>
        <tbody>
            <!-- ... (保持与原HTML相同的<tbody>内容) ... -->
            <tr>
                <td class="No">1</td>
                <td><input type="text" value=""></td>
                <td><input type="text" value=""></td>
                <td>
                    <select>
                        <option value="Please choose the category..." disabled selected>Please choose the category...</option>
                        <option value="Business">Business</option>
                        <option value="Fiction">Fiction</option>
                        <option value="Mathematics">Mathematics</option>
                        <option value="Technology">Technology</option>
                    </select>
                </td>
                <td class="price"><input type="number" value="0.00"></td>
                <td class="quantity"><input type="number" value="0"></td>
                <td class="total"><input type="number" value="0.00" disabled></td>
            </tr>
            <!-- 更多行... -->
            <tr>
                <td class="No">5</td>
                <td><input type="text" value=""></td>
                <td><input type="text" value=""></td>
                <td>
                    <select>
                        <option value="Please choose the category..." disabled selected>Please choose the category...</option>
                        <option value="Business">Business</option>
                        <option value="Fiction">Fiction</option>
                        <option value="Mathematics">Mathematics</option>
                        <option value="Technology">Technology</option>
                    </select>
                </td>
                <td class="price"><input type="number" value="0.00"></td>
                <td class="quantity"><input type="number" value="0"></td>
                <td class="total"><input type="number" value="0.00" disabled></td>
            </tr>
        </tbody>

        <tfoot>
            <tr>
                <td class="background-colour" colspan="5">
                    <!-- 移除原始的计算按钮 -->
                </td>
                <td class="background-colour" colspan="2">
                    <input type="number" name="Grand Total Price" value="0.00" class="GrandTotal" disabled>
                </td>
            </tr>
        </tfoot>
    </table>

</body>
</html>

登录后复制

注意事项与最佳实践

性能优化：对于包含大量行（数百或数千）的表格，每次input事件都遍历所有行可能会有轻微的性能开销。然而，对于大多数常见的表格，这种方法已经足够高效。如果需要进一步优化，可以考虑只计算发生变化的行，但这会增加代码的复杂性。
输入验证：当前的实现仅处理了负值输入。在实际应用中，您可能还需要处理非数字输入（尽管type="number"已经提供了一些浏览器级别的限制，但仍可通过开发者工具绕过），或者定义更复杂的业务规则。
用户体验：当用户输入负值时，立即将其重置并给出警告是一种直接的反馈。您可以根据产品需求调整这种反馈方式，例如，将负值输入框边框变为红色，而不是弹出alert。
可访问性：确保所有输入框都有适当的aria-label或其他可访问性属性，以便屏幕阅读器用户也能理解其用途。