如何监听被jQuery/JavaScript更新的表格？获取动态新增行需引入哪些库？

一、前端核心逻辑修正（原代码问题及正确实现） #

你最初写的jQuery代码存在几个明显问题：

• 选择器错误：你现有表格没有设置id="table"，$('#table')无法匹配到对应元素
• 事件绑定逻辑错误：change事件直接绑定在整个table上无法准确触发，且没有使用事件委托，无法监听到后续动态新增行的变更
• 计算逻辑错误：按照你给出的示例，行合计规则是数量 * 单价 - 折扣，原代码的遍历取值逻辑完全不匹配当前表格结构，且普通td元素没有val()方法，需要用text()取值
• 没有兼容动态新增行的监听需求

修正后的完整代码 #

首先给表格增加id属性，给可编辑单元格加上contenteditable属性：

<table id="productTable">
    <tbody>
        <tr>
            <td>1</td>
            <td class="qty" contenteditable="true">1</td>
            <td class="price" contenteditable="true">2</td>
            <td class="disc" contenteditable="true">0</td>
            <td class="total">2</td>
        </tr>
        <tr>
            <td>2</td>
            <td class="qty" contenteditable="true">2</td>
            <td class="price" contenteditable="true">10</td>
            <td class="disc" contenteditable="true">10</td>
            <td class="total">18</td>
        </tr>
    </tbody>
</table>

正确的jQuery实现代码：

// 1. 监听可编辑单元格变更，动态计算行合计（事件委托默认兼容动态新增行）
$('#productTable').on('input', '.qty, .price, .disc', function () {
    const row = $(this).closest('tr');
    const qty = Number(row.find('.qty').text()) || 0;
    const price = Number(row.find('.price').text()) || 0;
    const disc = Number(row.find('.disc').text()) || 0;
    const total = qty * price - disc;
    row.find('.total').text(total > 0 ? total : 0);
});

// 2. 监听动态新增行动作，自动计算最后一行的合计值
const tbody = document.querySelector('#productTable tbody');
const observer = new MutationObserver((mutations) => {
    mutations.forEach(mutation => {
        if (mutation.addedNodes.length) {
            const lastRow = $('#productTable tbody tr:last');
            const qty = Number(lastRow.find('.qty').text()) || 0;
            const price = Number(lastRow.find('.price').text()) || 0;
            const disc = Number(lastRow.find('.disc').text()) || 0;
            lastRow.find('.total').text(qty * price - disc > 0 ? qty * price - disc : 0);
        }
    });
});
observer.observe(tbody, { childList: true });

如果你的可编辑单元格是用<input>标签实现的，把上述代码里的.text()替换为.val()即可。

二、所需依赖说明 #

前端依赖 #

仅需引入jQuery即可，无需其他额外前端库，可直接用CDN引入或者下载到本地静态资源目录调用。

Python后端依赖 #

你使用Python开发无需引入和该表格功能相关的特殊第三方依赖，只需要使用常规Python Web框架即可：

• 轻量场景可选：Flask/FastAPI
• 中重型项目可选：Django

内容的提问来源于stack exchange，提问作者Hayden