如何在HTML/Thymeleaf表单中通过JS传递HashMap键实现后端移除？

我明白你现在的困扰——动态生成的表格行要传递Map key到后端，而且不想在前端碰Map逻辑，完全依赖后端处理对吧？咱们一步步来解决这个问题：

先梳理现有代码的问题 #

1. 重复ID冲突：你所有的Remove链接都用了id="removeinstitution"，JS里用$("#removeinstitution")只能选中第一个元素，后面的按钮根本不会触发事件。
2. JS语法错误：$("#removeinstitution").a select: 这行写法完全错误，应该绑定click点击事件。
3. 缺少必要的表单字段：你需要在表单里加隐藏字段来传递removeInstitutionId和situationCreateSubmit的值，不然后端接收不到这些参数。

解决方案步骤 #

1. 修正HTML/Thymeleaf代码

首先，修改表格行和Remove按钮，给每个按钮绑定对应的Map key，同时添加表单隐藏字段：

<!-- 在表单内添加两个隐藏字段，用于传递参数给后端 -->
<input type="hidden" id="removeInstitutionId" name="removeInstitutionId" />
<input type="hidden" id="situationCreateSubmit" name="situationCreateSubmit" />

<!-- 表格部分 -->
<table class="table table-dark">
  <tbody>
    <!-- 遍历Map，institution是键值对对象，直接取key即可 -->
    <tr class="col-12 item-dark" th:each="institution : *{situation.institutions}">
      <td th:text="${institution.value.name}"></td>
      <!-- 用按钮代替a标签，添加data属性存储key，用类选择器避免重复ID -->
      <td>
        <button type="button" class="btn btn-danger remove-btn" 
                th:data-institution-id="${institution.key}">
          Remove
        </button>
      </td>
    </tr>
  </tbody>
</table>

这里的关键是用th:data-institution-id="${institution.key}"把每个Map的key存在按钮的自定义属性里，点击时可以直接获取；同时用类remove-btn代替重复的ID，避免选择器冲突。

2. 修正JavaScript代码

因为是动态生成的元素，最好用事件委托绑定事件，确保新添加的行也能触发点击逻辑：

$(document).ready(function() {
  // 事件委托：绑定到表格tbody，监听子元素的点击事件
  $('table tbody').on('click', '.remove-btn', function() {
    // 从按钮的data属性中获取对应的Map key
    const institutionId = $(this).data('institution-id');
    
    // 给隐藏字段赋值，对应后端模型的属性
    $('#removeInstitutionId').val(institutionId);
    $('#situationCreateSubmit').val(false);
    
    // 提交表单（假设你的表单id是situation-create）
    $('#situation-create').submit();
  });
});

为什么这样做？ #

• 事件委托：后端动态生成的表格行，直接绑定事件只会对初始加载的元素生效，事件委托通过监听父元素的事件，能覆盖所有后续生成的子元素。
• data属性传递key：Thymeleaf直接把后端的institution.key渲染到按钮的data-*属性里，JS无需解析DOM内容，获取数据更可靠。
• 隐藏字段传递参数：表单提交时，隐藏字段的name属性和后端模型SituationRequestModel的属性名完全一致，Spring MVC能自动完成参数绑定。

这样修改后，点击每行的Remove按钮，就会把对应的Map key传给后端的removeInstitutionId，同时设置situationCreateSubmit为false，后端就能正常执行移除逻辑了。

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