Bootstrap双模态框下，.closest("tr")获取表格数据填充模态框失败问题

切换到监听show.bs.modal事件后失效，核心原因是事件上下文变了：

• 之前绑定按钮click事件时，$(this)指向点击的按钮，能通过.closest("tr")找到对应行；
• 绑定模态框show.bs.modal事件时，$(this)指向模态框本身，自然找不到表格行。

利用Bootstrap模态框show.bs.modal事件自带的relatedTarget属性，它会指向触发模态框的元素（也就是你点击的表格行按钮）。

修改后的代码示例 #

// 监听第一个模态框的show事件
$("#你的第一个模态框ID").on("show.bs.modal", function(event) {
  // 获取触发模态框的按钮
  const triggerBtn = $(event.relatedTarget);
  // 通过按钮定位到所在的表格行
  const targetRow = triggerBtn.closest("tr");

  // 提取行内数据并填充到模态框输入字段
  // 示例：假设表格行内有带类名的单元格，模态框输入框有name属性
  $(this).find("input[name='用户名']").val(targetRow.find(".用户名单元格类名").text().trim());
  $(this).find("input[name='邮箱']").val(targetRow.find(".邮箱单元格类名").text().trim());
  // 其他字段依次类推
});

关键注意事项 #

• 确保触发第一个模态框的按钮，带有正确的Bootstrap触发属性：
  • Bootstrap 5：data-bs-target="#你的第一个模态框ID"
  • Bootstrap 4及以下：data-target="#你的第一个模态框ID"
• 如果表格是动态生成的（比如异步加载数据），该方案依然有效，因为relatedTarget不受元素动态生成影响。

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