JavaScript实现HTML表格数据的实时计算与更新-js教程-PHP中文网

JavaScript实现HTML表格数据的实时计算与更新

本文详细介绍了如何利用javascript事件委托机制，实现html表格中单行总价和总计的实时动态更新。通过监听父级表格的input事件，我们能够即时捕获用户在单价和数量输入框中的改动，并同步更新相应行的总价及整个订单的总价，同时包含对负数输入的处理，显著提升了用户体验。

在构建交互式网页应用时，尤其是涉及数据录入和计算的场景，如订单系统或购物车，实时反馈是提升用户体验的关键。传统的做法是让用户在输入数据后点击一个按钮来触发计算，但这往往导致操作流程繁琐且效率低下。本教程将深入探讨如何通过JavaScript事件委托技术，实现HTML表格中单行总价（Total）和总计（Grand Total）的即时动态更新，从而避免手动触发计算的需要。

传统计算方式的局限性

在许多初始实现中，计算逻辑通常封装在一个函数中，并通过按钮的onclick事件来调用。例如，以下JavaScript代码展示了一个典型的计算逻辑：

function calculateTotal() {
  let rows = document.querySelectorAll("tbody tr");
  let grandTotal = 0;
  let negative = false;

  for (let i = 0; i < rows.length; i++) {
    let row = rows[i];

    let quantityInput = row.querySelector(".quantity input");
    let priceInput = row.querySelector(".price input");
    let totalInput = row.querySelector(".total input");

    let quantity = parseInt(quantityInput.value);
    let price = parseFloat(priceInput.value); // 注意：toFixed(2)应该在最终显示时使用，计算时使用浮点数

    if(isNaN(quantity) || quantity < 0){ // 增加对NaN的检查
      negative = true;
      quantity = 0;
      quantityInput.value = "0";
    }
    if(isNaN(price) || price < 0){ // 增加对NaN的检查
      negative = true;
      price = 0.00;
      priceInput.value = "0.00";
    }

    let total = quantity * price;

    totalInput.value = total.toFixed(2); // 在此处格式化显示

    grandTotal += total;
  }

  document.querySelector(".GrandTotal").value = grandTotal.toFixed(2);

  if(negative){
    alert("不允许输入负值！已自动重置为0。")
  }
}

登录后复制

这种方法要求用户每次更改单价或数量后，都必须点击“Calculate Grand Total Price”按钮才能看到更新后的结果。这显然不是一个理想的用户体验。

实时动态更新的实现：事件委托

为了实现实时更新，我们需要在用户输入时即刻触发计算。最有效的方法是利用事件委托（Event Delegation），将事件监听器附加到父级元素上，而不是每个单独的输入框。当事件在子元素上触发时，它会冒泡到父元素，父元素上的监听器就能捕获并处理它。

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

1. HTML结构准备

首先，确保你的HTML表格结构清晰，并且包含用于单价、数量、单行总价和总计的输入字段，并赋予相应的类名以便JavaScript选择器定位。

<!DOCTYPE html>
<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">
</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>
            <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">2</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>

    <script src="book-order.js"></script> <!-- 确保在</body>标签前引入JS -->
</body>
</html>

登录后复制

请注意，我们移除了tfoot中原有的“Calculate Grand Total Price”按钮，因为我们的目标是实现自动实时更新。

2. JavaScript事件委托逻辑

我们将使用DOMContentLoaded事件来确保DOM完全加载后再绑定事件监听器，避免因元素未加载而导致的错误。然后，在整个myTable上监听input事件。当任何input元素的值发生变化时，这个事件都会触发。

ViiTor实时翻译

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

116

查看详情

// book-order.js
window.addEventListener("DOMContentLoaded", () => {
  // 当页面DOM内容加载完毕后执行
  const myTable = document.getElementById("myTable");

  // 绑定input事件到整个表格，利用事件委托
  myTable.addEventListener("input", (event) => {
    // 检查触发事件的元素是否是我们关心的单价或数量输入框
    const target = event.target;
    if (!target.matches('.quantity input') && !target.matches('.price input')) {
        // 如果不是单价或数量输入框，则不执行计算
        return;
    }

    let rows = document.querySelectorAll("tbody tr");
    let negativeValueDetected = false; // 用于标记是否检测到负值

    // 使用Array.prototype.map和Array.prototype.reduce进行更简洁的计算
    let grandTotal = [...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);
      let price = parseFloat(priceInput.value);

      // 输入验证：处理非数字或负数输入
      if (isNaN(quantity) || quantity < 0) {
        negativeValueDetected = true;
        quantity = 0;
        quantityInput.value = "0"; // 重置为0
      }
      if (isNaN(price) || price < 0) {
        negativeValueDetected = true;
        price = 0.00;
        priceInput.value = "0.00"; // 重置为0.00
      }

      let total = quantity * price;
      totalInput.value = total.toFixed(2); // 更新单行总价

      return total; // 返回当前行的总价以便后续累加
    }).reduce((accumulator, currentValue) => accumulator + currentValue, 0); // 累加所有行的总价

    // 更新总计
    document.querySelector(".GrandTotal").value = grandTotal.toFixed(2);

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

登录后复制

3. CSS样式（可选）

CSS部分保持不变，它主要负责表格的视觉呈现。

/* book-order.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 { /* 此处Button类已不再需要，但保留以防其他用途 */
    float:right;
}

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

tr:hover {
    background-color: yellow;
}

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

body {
    background-color: lemonchiffon;
}

登录后复制

关键改进点和注意事项

事件委托 (myTable.addEventListener("input", ...)):
- 将事件监听器绑定到父元素myTable上，而不是每个quantity或price输入框。这减少了事件监听器的数量，提高了性能，尤其是在表格行数很多时。
- input事件在input元素的值发生变化时立即触发，提供了实时反馈。
- 通过event.target检查事件源，确保只有单价和数量输入框的变化才会触发计算，避免不必要的计算。
DOMContentLoaded:
- window.addEventListener("DOMContentLoaded", ...)确保JavaScript代码在DOM完全加载和解析后才执行。这保证了myTable元素及其内部的输入框在尝试绑定事件和查询时是可用的。
数据类型转换和验证:
- parseInt()和parseFloat()用于将输入值转换为数字。
- 增加了对isNaN()的检查，以处理用户可能输入非数字字符的情况。
- 对负数输入进行了处理：将其重置为0并弹出警告，这增强了数据的健壮性。
数组方法优化:
- 使用[...rows].map(...)将NodeList转换为数组，然后对每行执行计算并返回其总价。
- 使用.reduce(...)方法简洁地累加所有行的总价，生成最终的grandTotal。这种函数式编程风格使代码更具可读性和维护性。
数值格式化:
- toFixed(2)用于将计算结果格式化为两位小数，确保货币显示的一致性。

总结

通过采用事件委托和优化JavaScript逻辑，我们成功地将一个需要手动触发的表格计算系统改造为实时动态更新的交互式应用。这种方法不仅提升了用户体验，也展示了现代JavaScript在DOM操作和数据处理方面的强大能力和简洁性。在开发涉及大量用户输入和计算的Web界面时，实时反馈和高效的事件处理是不可或缺的考量。

以上就是JavaScript实现HTML表格数据的实时计算与更新的详细内容，更多请关注php中文网其它相关文章！