Spring/Thymeleaf表格行弹窗按钮仅首行可点击解决方案

开发Spring/Thymeleaf Web应用时，数据表格内每条实体记录都配置了用于打开弹窗的Click!按钮，实际运行时只有首条ID为1的记录对应的按钮可以正常触发弹窗，其余所有行的按钮点击后无响应。
页面效果参考：

两个核心问题导致异常：

• 违反HTML全局id唯一规范：在th:each循环中给所有按钮都设置了相同的id="myBtn"，原生JS的document.getElementById("myBtn")只会匹配到页面中第一个符合条件的元素，仅给首行按钮绑定了点击事件，其余按钮根本没有绑定事件监听，自然点击无反应。
• 现有弹窗逻辑缺陷：所有按钮共用同一个弹窗容器，弹窗内默认渲染全量的战争关联数据，就算修复了按钮绑定问题，点击任意按钮打开的弹窗内容都是完全一样的，无法展示对应行的专属详情。

不需要重构现有代码，仅修改按钮属性和JS绑定逻辑即可让所有按钮正常触发弹窗：

1. 替换循环内按钮的id为公共class，同时新增自定义属性存储当前行的战争ID，用于后续加载对应详情：

<!-- 原来的按钮代码 <button id="myBtn">Click!</button> 替换为下方代码 -->
<button class="detail-btn" th:data-war-id="${war.idWar}">Click!</button>

2. 重写JS事件绑定逻辑，遍历所有带detail-btn类的按钮，逐个绑定点击事件：

// 原有获取单个按钮的代码 var btn = document.getElementById("myBtn"); 直接删除
var modal = document.getElementById("myModal");
var span = document.getElementsByClassName("close")[0];

// 给所有详情按钮统一绑定点击事件
var allDetailBtns = document.querySelectorAll(".detail-btn");
allDetailBtns.forEach(function(btn) {
  btn.addEventListener("click", function() {
    // 取出当前按钮对应的战争ID，后续可用来加载对应行的详情数据
    const currentWarId = this.getAttribute("data-war-id");
    // 此处可补充异步拉取对应战争详情、替换弹窗内表格内容的逻辑
    modal.style.display = "block";
  })
})

// 原有弹窗关闭逻辑保持不变
span.onclick = function() {
  modal.style.display = "none";
}
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}

修改完成后所有行的按钮都可以正常触发弹窗，后续只要补充点击时加载对应战争详情的逻辑，就能让弹窗展示匹配行的内容。

如果不想在现有逻辑上修补，可以根据业务场景选择以下更易维护的方案：

• 行内独立弹窗方案：在th:each循环内为每一行渲染独立的弹窗DOM，给弹窗设置带战争ID的唯一标识（比如th:id="'warDetailModal-' + ${war.idWar}"），按钮点击时直接触发对应ID的弹窗显示。适合表格行数少、详情内容简单的场景，缺点是行数较多时会生成大量隐藏DOM，影响首屏加载速度。
• Bootstrap原生Modal方案：项目已经引入了Bootstrap依赖，直接使用Bootstrap封装的Modal组件即可，不需要自己手写弹窗显示隐藏、点击外部关闭的逻辑，组件原生支持通过data-bs-target属性绑定触发按钮和对应弹窗，可大幅减少手写JS代码量，稳定性更高。
• 异步加载弹窗方案：点击按钮时向后端发送异步请求，拉取对应战争ID的详情数据，动态填充到全局唯一的弹窗容器后再打开弹窗。首屏不需要渲染任何详情数据，适合表格行数多、详情内容复杂的场景，页面加载性能更好。

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