jQuery实现动态新增行下拉框值同步至同行输入框问题

核心问题分析 #

原代码存在几个关键问题：

• 静态元素的change事件未定位到同行输入框，会修改所有.putCode的值
• 动态新增元素的事件绑定方式错误，无法触发
• 动态行使用了冗余的新类名，增加代码复杂度

修正后的完整代码 #

HTML部分（保持类名统一） #

<table class="table table-bordered table_field3" id="table_field3" style="overflow-x: auto;white-space: nowrap;">
    <thead>
        <tr class="thead-dark">
            <th> #</th>
            <th style="width: 250px; !important"> put code</th>
            <th style="width: 200px; !important"> data1</th>
            <th style="width: 200px; !important">data 2</th>
            <th style="width: 200px; !important">  data 3</th>
            <th style="width: 200px; !important"></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td style="display:none;"><input type="text"  name="prod_idd[]" style="display:none" value="{{$lastid->id}}"></td>
            <td>
                <input type="text" style="width: 250px; !important" class="sub_code form-control getAllCode putCode" name="sub_code[]">
            </td>
            <td>
                <input style="width: 200px; !important"  type="text" value="" class="conversionfactor form-control getConversion" name="conversionfactor[]">
            </td>
            <td>
                <select style="width: 150px; !important"   class="form-control getUnit" name="unit_id[]">
                    <option value="my name one" name="my name">one</option>
                    <option value="my name" name="my name two">two</option>
                </select>
            </td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td style="width: 200px; !important"><input type="button" class="btn btn-success" name="add" id="add3" value="add" style="color: white"></td>
        </tr>
    </tfoot>
</table>

jQuery部分（修正事件绑定与同行定位） #

// 新增行按钮事件
$('#add3').click(function(){
    var size = $('#table_field3 tbody').children().length + 1;
    // 动态行复用静态行的类名：putCode、getUnit
    var html = `<tr>
        <td>${size}</td>
        <td style="display:none;"><input type="text" name="prod_idd[]" style="display:none" value="{{$lastid->id}}"></td>
        <td><input type="text" class="form-control sub_code putCode" name="sub_code[]"></td>
        <td><input type="text" class="conversionfactor form-control" name="conversionfactor[]"></td>
        <td><select style="width: 150px; !important" class="form-control getUnit" name="unit_id[]">
            @foreach ($units as $unit)
                <option value="{{$unit->id}}" name="{{$unit->unit_code}}">{{$unit->unit_name . ' ( ' . $unit->unit_code . ' ) '}}</option>
            @endforeach
        </select></td>
        <td><input type="button" class="btn btn-danger remove" name="remove" value="delete" style="color:white;"></td>
    </tr>`;
    $('#table_field3 tbody').append(html); // 追加到tbody内，避免破坏表格结构
});

// 删除行事件（用类名而非id，避免重复id导致的失效问题）
$('#table_field3').on('click','.remove',function(){
    $(this).closest('tr').remove();
    // 可选：删除后重新排序序号
    $('#table_field3 tbody tr').each(function(index){
        $(this).find('td:first').text(index+1);
    });
});

// 下拉框change事件（事件委托，同时支持静态和动态行）
$('#table_field3').on('change', '.getUnit', function(){
    // 获取当前选中option的name属性
    var getCodeUnit = $(this).find('option:selected').attr('name');
    // 精准定位到当前行的putCode输入框
    $(this).closest('tr').find('.putCode').val(getCodeUnit);
});

关键优化点说明 #

1. 统一类名：静态和动态行的下拉框/输入框复用同一类名，减少冗余代码
2. 事件委托：通过父容器绑定事件，确保动态新增的元素能触发事件
3. 同行定位：用closest('tr')锁定当前行，再找到对应输入框，仅修改当前行的值
4. 删除按钮修正：将id改为类名，避免页面重复id导致的功能失效
5. 序号重排：删除行后自动更新序号，保持表格序号连续（可选功能）

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