本教程详细阐述了如何利用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结构。这是一个典型的订单表格，包含多行商品信息，每行有单价、数量和总价的输入框。
| No. | Book Title | Author | Category | Unit Price | Quantity | Total |
|---|---|---|---|---|---|---|
| 1 | ||||||
关键点：
- 整个表格有一个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' 事件会在 ,