如何在DataTable中追加继承首行类的TR，解决动态行无法折叠问题

你所使用的响应式表格组件（常见如DataTables Responsive扩展）仅会在表格初始化阶段对已存在的行完成折叠逻辑绑定、响应式类添加操作。你通过jQuery原生append方法动态插入的行未经过组件的初始化处理，因此无法继承折叠效果。同时现有代码存在ID重复、事件重复绑定的隐患，也会导致功能异常。

• 移除动态生成元素的重复ID：HTML规范要求ID全局唯一，原有代码中动态生成的输入框ID和首行完全重复，会导致DOM操作异常。
• 事件绑定移出添加行逻辑：原有删除行事件绑定写在添加行函数内，每次新增行都会重复绑定事件，需移到全局仅绑定一次。
• 动态增删行后触发组件重计算：不要直接用原生方法操作DOM后跳过组件的更新逻辑，增删行后手动调用表格组件的响应式重计算方法即可。
• 保持新增行与原有行的DOM属性完全一致，避免出现样式、逻辑差异。

var x = 1;
// 全局绑定一次删除行事件即可
$('.myApe').on("click",".remove_field", function(e){ 
    e.preventDefault(); 
    $(this).closest('tr').remove(); 
    x--;
    // 删除行后触发响应式重计算
    $('#example14').DataTable().responsive.recalc();
})

function addContainer1(){
    var max_fields_limit = 10; 
    if(x >= max_fields_limit) return; // 触达上限后禁止新增
    $('.myApe').append('<tr role="row" class="even">'+
    '<td><input type="text" name="TEU[]" class="form-control" placeholder="Container Number" required></td> '+
    '<td><div class="row"><input type="text" name="CBM[]" class="form-control" placeholder="CBM" required style="width:80%">'+
    '<button class="remove_field btn btn-sm btn-danger">-</button></div></td>'+
    '</tr>');           
    x++;
    // 核心：新增行后触发响应式重计算
    $('#example14').DataTable().responsive.recalc();
}

如果你使用的是其他响应式表格组件，替换重计算逻辑为对应组件的API即可，核心逻辑不变。

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