jQuery静态与动态输入框值计算及赋值问题求助

我注意到你当前的代码存在几个关键问题需要先修正，再实现计算逻辑：

1. 修复重复ID的问题 #

HTML要求页面内的id必须唯一，但你每次添加新行时都用了相同的id（比如newTreasuryDeposit、newReyat），这会导致后续无法精准定位到每一行的输入框。我们需要把ID改成带行号的动态值，结合变量n生成唯一标识；另外原代码里的元素选择器漏了#，这也是无法触发添加行的原因，必须补上。

修改后的动态行生成代码：

$(document).ready(function () {
    $("#addrowMushok18").click(function () {
        var n = ($('.row_append tr').length - 0) + 1;
        var tr = '<tr>\
            <td>' + n + '</td>\
            <td><input type="date" required name="transection_date[]" class="form-control"></td>\
            <td><input type="text" required name="transection_details[]" class="form-control" /></td>\
            <td><input type="text" required name="purchase_sales_statement[]" class="form-control" /></td>\
            <td><input type="date" required name="purchase_sales_date[]" class="form-control" /></td>\
            <td><input type="text" required id="newTreasuryDeposit_' + n + '" name="treasury_deposit[]" class="form-control treasury-deposit" /></td>\
            <td><input type="text" required id="newReyat_' + n + '" name="reyat_2[]" class="form-control reyat" /></td>\
            <td><input type="text" required id="newProdeyo_' + n + '" name="prodeyo_3[]" class="form-control" /></td>\
            <td><input type="text" required id="newSomaponyJer_' + n + '" name="somapony_jer[]" class="form-control somapony-result" readonly /></td>\
            <td><input type="text" required name="remarks[]" class="form-control" /></td>\
            <td align="center"><span class="remove_row"><i class="fa fa-trash-o fa-2x text-danger" data-toggle="tooltip" data-placement="left" title="Delete!" ></i></span></td>\
        </tr>';
        $("#row_append").append(tr);
    });
});

我还给需要参与计算的输入框加了类名（比如treasury-deposit、reyat），方便后续用类选择器统一监听事件；结果输入框加了readonly属性，避免用户手动修改计算结果，你可以根据需求去掉。

2. 实现实时计算逻辑 #

接下来我们需要监听静态输入框#somaponyJer和所有动态生成的输入框的input事件，当值变化时自动计算并填入对应的结果框。把以下代码添加到$(document).ready()中即可：

// 监听静态输入框变化，更新所有行的计算结果
$("#somaponyJer").on("input", function() {
    calculateAllRows();
});

// 监听动态输入框变化，只更新当前行的结果
$("#row_append").on("input", ".treasury-deposit, .reyat", function() {
    var $currentRow = $(this).closest("tr");
    calculateSingleRow($currentRow);
});

// 单行计算逻辑函数
function calculateSingleRow($row) {
    // 获取各输入框的值，转成数字并设置默认值0，避免非数字输入导致NaN
    var staticVal = parseFloat($("#somaponyJer").val()) || 0;
    var treasuryVal = parseFloat($row.find(".treasury-deposit").val()) || 0;
    var reyatVal = parseFloat($row.find(".reyat").val()) || 0;

    // 替换成你实际需要的计算逻辑，示例为：静态值 + 存款值 - Reyat值
    var result = staticVal + treasuryVal - reyatVal;

    // 将结果填入当前行的结果框，保留两位小数（按需调整）
    $row.find(".somapony-result").val(result.toFixed(2));
}

// 全量计算所有行的函数
function calculateAllRows() {
    $("#row_append tr").each(function() {
        calculateSingleRow($(this));
    });
}

补充说明 #

• 如果你的计算逻辑不是示例中的公式，直接修改result的计算表达式即可；
• 用parseFloat()处理输入值并设置默认值0，能有效避免输入非数字内容时出现计算错误；
• 事件委托的方式确保动态生成的元素也能触发计算事件，不用每次添加行都重新绑定事件。

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