如何实现表格逐行数值相减及行状态控制与动态新增？

1. 修复基础数值计算逻辑 #

现有代码存在两个核心问题：循环中错误选中所有表格行，以及未处理字符串转数字的计算异常。修正后的基础计算逻辑如下：

$('#Table_2 tbody tr').each(function() {
    const $row = $(this);
    // 空值默认转为0，避免字符串计算错误
    const quantity = Number($row.find('input[data-column="ctrl_Table3Column_evxcq"]').val()) || 0;
    const exitItemQty = Number($row.find('input[data-column="ctrl_Table3Column_9zd2j"]').val()) || 0;
    const balanceQty = quantity - exitItemQty;
    $row.find('input[data-column="ctrl_Table3Column_0opcc"]').val(balanceQty);
});

2. 监听输入变化实时触发计算 #

需要监听Exit Item Qty、Guard On Duty、Date and Time的输入变化，实时更新计算结果并触发后续逻辑：

// 监听关键输入框的变化
$('#Table_2').on('input', 'input[data-column="ctrl_Table3Column_9zd2j"], input[data-column="ctrl_Table3Column_zmlc9"], input[data-column="ctrl_Table3Column_8fa36"]', function() {
    const $row = $(this).closest('tr');
    updateRowBalance($row);
    handleRowState($row);
});

// 封装更新Balance Qty的复用函数
function updateRowBalance($row) {
    const quantity = Number($row.find('input[data-column="ctrl_Table3Column_evxcq"]').val()) || 0;
    const exitItemQty = Number($row.find('input[data-column="ctrl_Table3Column_9zd2j"]').val()) || 0;
    const balanceQty = quantity - exitItemQty;
    $row.find('input[data-column="ctrl_Table3Column_0opcc"]').val(balanceQty);
}

3. 实现行禁用与新增行逻辑 #

• 当Balance Qty为0且Guard On Duty和Date and Time已填写时，禁用当前行的可编辑输入框
• 如果Balance Qty大于0，且当前行是同Item组的最后一行，则新增行（继承当前Item的Quantity值）

// 处理行的禁用状态与新增逻辑
function handleRowState($row) {
    const balanceQty = Number($row.find('input[data-column="ctrl_Table3Column_0opcc"]').val()) || 0;
    const guardOnDuty = $row.find('input[data-column="ctrl_Table3Column_zmlc9"]').val().trim();
    const dateTime = $row.find('input[data-column="ctrl_Table3Column_8fa36"]').val().trim();
    const $editableInputs = $row.find('input[required]');

    // 满足条件时禁用行
    if (balanceQty === 0 && guardOnDuty && dateTime) {
        $editableInputs.prop('disabled', true);
        $row.addClass('table-secondary'); // 视觉标记禁用行
    } else {
        $editableInputs.prop('disabled', false);
        $row.removeClass('table-secondary');
    }

    // 差值大于0且为同组最后一行时新增行
    if (balanceQty > 0) {
        const $nextRow = $row.next();
        const currentItem = $row.find('input[data-column="ctrl_Table3Column_ft3p0"]').val().trim();
        const nextItem = $nextRow.length ? $nextRow.find('input[data-column="ctrl_Table3Column_ft3p0"]').val().trim() : '';
        
        if (!$nextRow.length || currentItem !== nextItem) {
            addNewRow($row);
        }
    }
}

// 新增行函数，继承源行的只读字段值
function addNewRow($sourceRow) {
    const $newRow = $sourceRow.clone();
    // 清空可编辑输入框，保留Item和Quantity的只读值
    $newRow.find('input[required]').val('').prop('disabled', false);
    $newRow.removeClass('table-secondary');
    $sourceRow.after($newRow);
    // 初始化新行的Balance Qty
    updateRowBalance($newRow);
}

完整代码 #

将上述代码整合，放在DOM加载完成后执行：

$(document).ready(function() {
    // 初始化所有行的Balance Qty
    $('#Table_2 tbody tr').each(function() {
        updateRowBalance($(this));
    });

    // 监听输入变化
    $('#Table_2').on('input', 'input[data-column="ctrl_Table3Column_9zd2j"], input[data-column="ctrl_Table3Column_zmlc9"], input[data-column="ctrl_Table3Column_8fa36"]', function() {
        const $row = $(this).closest('tr');
        updateRowBalance($row);
        handleRowState($row);
    });

    // 更新Balance Qty
    function updateRowBalance($row) {
        const quantity = Number($row.find('input[data-column="ctrl_Table3Column_evxcq"]').val()) || 0;
        const exitItemQty = Number($row.find('input[data-column="ctrl_Table3Column_9zd2j"]').val()) || 0;
        const balanceQty = quantity - exitItemQty;
        $row.find('input[data-column="ctrl_Table3Column_0opcc"]').val(balanceQty);
    }

    // 处理行状态
    function handleRowState($row) {
        const balanceQty = Number($row.find('input[data-column="ctrl_Table3Column_0opcc"]').val()) || 0;
        const guardOnDuty = $row.find('input[data-column="ctrl_Table3Column_zmlc9"]').val().trim();
        const dateTime = $row.find('input[data-column="ctrl_Table3Column_8fa36"]').val().trim();
        const $editableInputs = $row.find('input[required]');

        if (balanceQty === 0 && guardOnDuty && dateTime) {
            $editableInputs.prop('disabled', true);
            $row.addClass('table-secondary');
        } else {
            $editableInputs.prop('disabled', false);
            $row.removeClass('table-secondary');
        }

        if (balanceQty > 0) {
            const $nextRow = $row.next();
            const currentItem = $row.find('input[data-column="ctrl_Table3Column_ft3p0"]').val().trim();
            const nextItem = $nextRow.length ? $nextRow.find('input[data-column="ctrl_Table3Column_ft3p0"]').val().trim() : '';
            
            if (!$nextRow.length || currentItem !== nextItem) {
                addNewRow($row);
            }
        }
    }

    // 新增行
    function addNewRow($sourceRow) {
        const $newRow = $sourceRow.clone();
        $newRow.find('input[required]').val('').prop('disabled', false);
        $newRow.removeClass('table-secondary');
        $sourceRow.after($newRow);
        updateRowBalance($newRow);
    }
});

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