为jQuery动态添加的行添加删除按钮并更新总计

需求：给动态生成的表格行添加删除按钮，点击按钮删除该行，同时把该行的数值从总计里扣除。

你尝试的代码方向是对的，但存在几个小问题，比如elementID未定义、依赖row变量可能导致计算偏差，下面是修正后的实现：

修正后的删除事件代码 #

$(document).on("click", ".delete-row", function () {
    // 定位并删除当前按钮所在的行
    $(this).closest('tr').remove();
    // 重新计算总计
    updateTotal();
    return false;
});

// 重新计算总计的函数
function updateTotal() {
    let total = 0;
    // 遍历所有数据行（跳过表头）
    $('table tr:not(:first)').each(function() {
        // 替换成你实际存储行结果的元素选择器
        const rowResult = parseFloat($(this).find('.row-result').text()) || 0;
        total += rowResult;
    });
    // 替换成你显示总计的元素选择器
    $('#total-display').text(total.toFixed(2));
}

关键说明 #

• 事件委托绑定：因为行是动态生成的，必须用$(document).on绑定点击事件，确保新添加的删除按钮能触发
• 重新计算逻辑：删除行后不要依赖row变量做减法，直接遍历所有剩余数据行重新计算总计，避免因行顺序变化或删除多行导致的错误
• 数值处理：用parseFloat转换文本为数值，加|| 0处理空值或非数值情况，防止计算出错
• 选择器适配：根据你实际的表格DOM结构，替换.row-result和#total-display为对应的元素选择器

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