JS结合PHP开发：点击表格删除按钮仅获取最后一行ID的更新问题

• 执行逻辑错位：你构造FormData、发送XHR请求的代码块，直接写在了for循环的同步执行流程里，页面加载遍历所有删除按钮的瞬间，就会把所有更新请求全部发出去，完全没有等待用户点击的动作触发。
• 作用域绑定错误：代码中引用的randevubilgi没有在每个按钮对应的点击事件回调作用域里声明，循环跑完后全局作用域下的该变量始终指向表格最后一行的数据，因此不管触发哪个按钮的事件，读取到的都是最后一行的saat_id。
• 无效的存储逻辑：靠localStorage全局存储saat_id的设计完全冗余，循环的同步执行流程会在事件触发前就覆盖localStorage里的值，最终所有请求携带的ID都是最后一次循环写入的值，这也是你调试时看到「从点击位置到末尾依次读ID、最终取最后一个值」的直接原因。

前端JS改造逻辑 #

1. 把所有请求发送逻辑全部移入click事件回调内，保证仅用户点击按钮时才触发操作
2. 将每行对应的saat_id直接绑定到对应删除按钮的自定义属性上，不依赖全局变量或localStorage传递值，彻底隔离不同按钮的作用域
3. 用块级作用域写法代替传统var循环，避免闭包变量共享问题

// 获取所有删除按钮
const deleteTrashBtns = document.querySelectorAll(".las.la-trash-alt");
// 逐个绑定点击事件
deleteTrashBtns.forEach(btn => {
  btn.addEventListener("click", function () {
    // 从当前被点击按钮的自定义属性上读取对应的saat_id
    const currentSaatId = this.dataset.saatId;
    // 构造请求数据
    const formData = new FormData();
    formData.append("saat_id", currentSaatId);
    // 发起更新请求
    const xhr = new XMLHttpRequest();
    xhr.open("POST", "../../backend/randevu-iptal.php", true);
    xhr.send(formData);
    xhr.onload = function () {
      const response = JSON.parse(this.response);
      console.log(response);
      // 可在这里添加请求成功后的页面更新逻辑，比如移除当前行、更新状态提示
      if(response.status === "success" && response.affected_rows > 0) {
        this.closest("tr").remove();
      }
    };
  });
});

注意：渲染表格时需要给每个删除按钮补上data-saat-id自定义属性，将当前行的saat_id写入属性值，示例HTML结构：

<tr>
  <td>预约时间</td>
  <td>用户信息</td>
  <td>
    <i class="las la-trash-alt" data-saat-id="<?php echo $row['saat_id']; ?>"></i>
  </td>
</tr>

后端PHP优化建议 #

增加入参校验、强制类型转换，返回明确的操作结果，避免静默执行导致前端无法判断操作是否成功：

<?php 
require("sistem/baglan.php");
header("Content-Type: application/json");
// 校验请求合法性
if($_SERVER['REQUEST_METHOD'] !== 'POST' || !isset($_POST["saat_id"])){
  echo json_encode(["status" => "error", "msg" => "非法请求"]);
  exit;
}
// 强制转成整数，避免SQL注入风险
$saatid= intval($_POST["saat_id"]);
$saatdurum = "bos";
$guncelle = $db -> prepare("UPDATE saat SET saat_durum=? WHERE saat_id=?");
$guncelle -> execute([$saatdurum, $saatid]);
// 返回操作结果
echo json_encode([
  "status" => "success",
  "affected_rows" => $guncelle->rowCount()
]);
?>

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