无需使用事件处理器，如何获取当前表格行？

你当前的代码在模态框的show.bs.modal事件里又绑定了document的点击事件，这不仅冗余，还会导致逻辑混乱——因为模态框弹出的触发动作（点击按钮）已经完成，再绑定点击事件完全没必要。其实Bootstrap模态框的show.bs.modal事件本身就提供了触发元素的引用，直接用它就能拿到当前表格行，不需要额外的事件处理器。

解决方案步骤： #

• 移除冗余的$(document).on('click','.editLocationBtn', ...)事件绑定
• 在show.bs.modal事件回调中，通过事件对象的relatedTarget属性获取触发模态框的按钮
• 利用这个按钮元素找到对应的表格行，保存下来供后续保存操作使用

修改后的代码： #

HTML（无需改动，保持原有结构即可）

<td><button type="button" data-bs-toggle="modal" class="btn btn-primary btn-sm editLocationBtn" data-bs-target="#editLocationModal">编辑</button></td>

JavaScript

// 定义变量保存当前行（根据业务需求放在合适的作用域中）
let currentRow;

$("#editLocationModal").on("show.bs.modal", function (e) {  
    // e.relatedTarget 就是触发模态框的 editLocationBtn 按钮
    const triggerBtn = e.relatedTarget;
    // 通过按钮找到最近的表格行
    currentRow = $(triggerBtn).closest('tr');
    // 若需获取行内第一个td的内容，可直接写：
    // const currentVal = currentRow.find('td').eq(0).text();
});

// 保存按钮点击事件示例，用currentRow更新行内容
$("#saveEditBtn").on('click', function() {
    // 假设从模态框表单获取新值
    const newValue = $("#locationInput").val();
    // 更新当前行第一个td的内容
    currentRow.find('td').eq(0).text(newValue);
    // 关闭模态框
    $("#editLocationModal").modal('hide');
});

关键说明： #

• e.relatedTarget是Bootstrap模态框事件的内置属性，专门指向触发模态框的DOM元素，完美替代了你之前通过document点击事件获取按钮的逻辑
• 将当前行存储在合适的作用域中，就能在保存按钮的事件里直接调用，完成行内容更新
• 这种方式无需额外绑定全局点击事件，逻辑更清晰，性能也更优

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