点击HTML表格行编辑按钮仅打开对应表单的实现问题

你的问题出在点击按钮时用类选择器选中了所有编辑表单，导致全部切换显示/隐藏。要实现仅操作对应行的表单，需要给每个按钮和表单建立唯一关联标识，以下是具体修改步骤：

1. 给按钮和表单添加关联标识 #

利用模板循环的唯一值（比如地址ID）给按钮和对应表单绑定相同的标识：

<!-- 表格中的编辑按钮 -->
<button class="btn-edit-address btn btn-sm mx-1" type="button" style="color: rgb(24, 115, 184);" data-address-id="{{ address.0 }}">
  <i class="fa fa-edit"></i>
</button>

<!-- 对应的编辑表单 -->
<form action="#" method="POST" class="form-edit-address" data-address-id="{{ address.0 }}" style="display: none; margin-top: 50px;">

2. 修改JS点击事件逻辑 #

点击按钮时，只切换与当前按钮标识匹配的表单：

$(".btn-edit-address").click(function() {
  // 获取当前按钮绑定的地址ID
  const addressId = $(this).data('address-id');
  // 仅切换对应ID的表单
  $(`.form-edit-address[data-address-id="${addressId}"]`).toggle('fast');
});

3. 修改关闭表单逻辑 #

取消按钮仅关闭当前所在的表单，避免全局关闭：

function closeEditAddressForm(event) {
  // 找到点击按钮所在的表单并切换显示
  $(event.target).closest('.form-edit-address').toggle('fast');
}

同时更新取消按钮的onclick属性，传递事件对象：

<button class="btn btn-warning ms-2" type="button" style="margin-top: 25px;" onclick="closeEditAddressForm(event)">
  Cancel
</button>

为什么这样有效？ #

通过data-address-id将每一行的编辑按钮和对应的表单一一绑定，点击按钮时只选中匹配该ID的表单，避免了全局操作所有表单的问题。如果后续有删除行的操作，用地址ID关联比循环索引更可靠。

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