如何在Thymeleaf中动态添加列表项，无需手动修改输入框name/id？

方法1：使用预定义模板行+占位符替换（最简便） #

不要克隆现有行，而是预先在页面中放置一个隐藏的模板行，用占位符代替索引值，点击添加按钮时生成新索引并替换占位符，再追加到容器中。

步骤1：添加隐藏的模板行

<div id="fieldRows">
  <!-- 现有渲染的行 -->
  <div class="row" id="fieldRow_0">
    <input type="text" id="customFieldDefinitions0.name" name="customFieldDefinitions[0].name"/>
    <input type="text" id="customFieldDefinitions0.type" name="customFieldDefinitions[0].type"/>
  </div>
  <div class="row" id="fieldRow_1">
    <input type="text" id="customFieldDefinitions1.name" name="customFieldDefinitions[1].name"/>
    <input type="text" id="customFieldDefinitions1.type" name="customFieldDefinitions[1].type"/>
  </div>
</div>

<!-- 隐藏的模板行，用__INDEX__作为索引占位符 -->
<div id="fieldRowTemplate" style="display: none;">
  <div class="row" id="fieldRow___INDEX__">
    <input type="text" id="customFieldDefinitions__INDEX__.name" name="customFieldDefinitions[__INDEX__].name"/>
    <input type="text" id="customFieldDefinitions__INDEX__.type" name="customFieldDefinitions[__INDEX__].type"/>
  </div>
</div>

步骤2：编写jQuery添加逻辑

$('#addButton').on('click', function() {
  // 计算新索引：当前已有行的数量
  const newIndex = $('#fieldRows .row').length;
  // 替换模板中的占位符，生成新行HTML
  const newRowHtml = $('#fieldRowTemplate').html().replace(/__INDEX__/g, newIndex);
  // 追加到行容器
  $('#fieldRows').append(newRowHtml);
});

这种方式避免了克隆行后逐个修改输入框的name和id，通过全局替换占位符一次性完成索引更新，代码更简洁可靠。

方法2：AJAX请求后端渲染新行（适合复杂场景） #

如果你的行结构复杂，包含Thymeleaf的其他动态逻辑（比如下拉选项、表达式），可以通过AJAX请求后端，让Thymeleaf渲染单一行的HTML（带正确索引），再将返回的HTML追加到前端。

后端Controller示例

@GetMapping("/custom-field-row")
public String getCustomFieldRow(@RequestParam int index, Model model) {
  model.addAttribute("index", index);
  // 传入空对象用于Thymeleaf绑定
  model.addAttribute("field", new CustomFieldDefinition());
  return "fragments/custom-field-row :: row";
}

Thymeleaf片段（fragments/custom-field-row.html）

<div th:fragment="row" class="row" th:id="'fieldRow_' + ${index}">
  <input type="text" th:field="*{customFieldDefinitions[__${index}__].name}"/>
  <input type="text" th:field="*{customFieldDefinitions[__${index}__].type}"/>
</div>

前端AJAX逻辑

$('#addButton').on('click', function() {
  const newIndex = $('#fieldRows .row').length;
  $.get('/custom-field-row', { index: newIndex }, function(html) {
    $('#fieldRows').append(html);
  });
});

关键注意点 #

• Spring MVC绑定列表时，只要求name属性的索引是唯一且可解析的整数，不一定需要连续，但连续索引更不易出错。
• 不要直接克隆现有行：克隆后的行name和id与原行重复，会导致表单提交时数据覆盖，无法正确绑定到后端列表。

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