在JavaScript中使用Struts2标签：Bootstrap动态表格新增行问题

看你在基于Struts2的项目里，用Bootstrap动态表格实现添加纯文本输入框行已经正常跑起来了，先把你提供的代码整理成规范格式：

核心前端代码片段 #

<script>
$(document).ready(function () {
    var counter = 0;
    $("#addrow").on("click", function () {
        var newRow = $("<tr>");
        var cols = "";
        cols += '<td><s:textfield type="text" class="form-control" name="catalogue.lignes[' + counter + '].id.catalogue.ID_CATALOGUE"/></td>';
        cols += '<td><s:textfield type="...'; // 你这里的代码没写完，后续应该还有拼接其他列、插入表格的逻辑
        // 补充示例：把拼接好的列插入新行，再添加到表格
        // newRow.append(cols);
        // $("#target-table").append(newRow);
        counter++;
    });
});
</script>

几个关键细节帮你避坑 #

• Struts2数据封装注意：要确保后端的catalogue.lignes是初始化完成的List集合，且对应的实体类有完整的getter/setter方法，否则表单提交时Struts2的OGNL表达式没法正确把动态行的输入值封装到后端对象里。
• 动态元素事件绑定：如果后续要给新增行的输入框加验证、联动这类事件，一定要用事件委托（比如$(document).on("input", ".form-control", function(){...})），不然新增的元素会绑定不上事件。
• Bootstrap样式一致性：新增行的结构、类名要和原有行完全一致，比如不要漏加表格相关的Bootstrap类，不然会出现样式错乱的问题。

如果后续遇到具体问题（比如新增下拉框/复选框时功能失效、提交后数据不回显等），可以把完整代码和问题细节补充上来，更容易定位解决~

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