如何修改jQuery动态生成的输入框值，实现自动填充兼支持手动修改？

你的重量输入框无法修改，是因为recalc函数每次执行都会强制用产品自带的默认重量覆盖输入框的值，且所有输入操作都会触发该函数，手动输入的内容会被立即冲掉。

调整逻辑拆分，仅在切换产品选项时填充重量默认值，计算小计的逻辑不再修改重量输入框内容，即可同时满足自动生成默认值、支持手动修改的需求。

修改后完整代码 #

JS部分 #

var numRows = 2, ti = 5;

function isNumber(n) {
  return !isNaN(parseFloat(n)) && isFinite(n);
}

// 仅负责计算小计，不修改重量输入值
function recalc() {
  $('#kas_table').find('tr').each(function() {
    var berat = parseFloat($(this).find('input.berat').val()) || 0;
    var qty = parseFloat($(this).find('input.qty').val()) || 0;
    var subtotal = (berat * qty);
    $(this).find('input.subtotal').val(Math.round(subtotal * 100) / 100);
  });
}

$(function() {
  // 仅切换产品选项时，填充重量默认值
  $('div.table-responsive').on("change", '.nama', function() {
    const $currentRow = $(this).closest('tr');
    const defaultWeight = $(this).find('option:selected').data('berat');
    if(defaultWeight) {
      $currentRow.find('input.berat').val(defaultWeight);
    }
    recalc();
  });

  // 数量、重量修改时触发小计计算
  $('div.table-responsive').on("keyup change blur", '.qty, .berat', recalc);
});

var i=0;
$('#add_new').click(function(){
  i++;
  $('#mainbody').append('<tr><td>' +
    '<select class="form-control nama" name="addmore['+i+'][nama]" id="nama'+i+'" required >' +
    '<option disabled="disabled" selected="selected" value="" >Select Produk</option>' +
    '<option value="1" data-berat="100">Item 1</option>' +
    '<option value="2" data-berat="170">Item 2</option>' +
    '</select></td>' +
    '<td><input class="form-control qty" type="number" name="addmore['+i+'][qty]" id="qty'+i+'" required ></td>' +
    '<td><input step=".001" class="form-control berat" type="number" name="addmore['+i+'][berat]" id="berat'+i+'" required ></td>' +
    '<td><input class="form-control subtotal" type="number" name="addmore['+i+'][subtotal]" id="subtotal'+i+'" required readonly></td>' +
    '</tr>'
  )
});

HTML部分和原有代码一致即可 #

主要调整说明 #

• 拆分了赋值和计算逻辑，避免每次计算都覆盖重量输入值
• 细化了事件绑定规则，不同操作触发对应逻辑，减少无意义的执行
• 增加了数值容错处理，空输入默认转为0，避免计算出现NaN

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