XMLHttpRequest更新数据库数据：closest()函数误用导致ID重复问题排查及代码正确性咨询

我来帮你搞定这个问题！你每次点击按钮都拿到同一个ID的核心原因，是在获取数据时错误地用了document.querySelectorAll('.statusBtn')来调用closest()，而不是针对当前被点击的那个按钮元素进行DOM查询。

问题根源拆解 #

document.querySelectorAll('.statusBtn')返回的是页面上所有匹配这个类名的按钮集合，当你对这个集合调用closest('tr')时，它只会作用于集合的第一个元素，所以不管你点哪一行的按钮，都会拿到第一行的ID值，这就是重复输出的原因。

正确的思路应该是：在点击事件中，基于当前被点击的按钮，去查找它所在的行/表单里的输入框值。

修正后的JavaScript代码 #

我调整了你的DOM查询逻辑，直接从当前按钮所在的<form>里取所需的input值（因为按钮本身就在目标form内部，这样查询更直接高效）：

if(document.querySelectorAll('.statusBtn')) {
  document.querySelectorAll('.statusBtn').forEach(el=> {
    el.addEventListener('click', (e)=> {
      e.preventDefault();
      // 找到当前按钮所在的form元素
      const targetForm = el.closest('form');
      // 从form中精准获取对应input的值
      const send= {
        id: targetForm.querySelector('input[name=id]').value,
        status: targetForm.querySelector('input[name=status]').value,
        token: targetForm.querySelector('input[name=token]').value
      };
      const jsonString=JSON.stringify(send);
      console.log(send['id']); // 现在会输出当前点击行的ID了
      const xhr=new XMLHttpRequest();
      xhr.open('POST', 'configs/appStatus.php', true);
      xhr.setRequestHeader('Content-type', 'application/json');
      xhr.onload=function() {
        if (this.readyState==4 && this.status==200) {
          document.querySelector(".textNotif").innerHTML=this.responseText;
          var toastElList=[].slice.call(document.querySelectorAll('.toast'))
          var toastList=toastElList.map(function(toastEl) {
            return new bootstrap.Toast(toastEl)
          });
          toastList.forEach(toast=> toast.show());
        };
      };
      xhr.send(jsonString);
    });
  });
};

额外优化说明 #

1. 为什么找<form>而不是<tr>？因为你的按钮本身就在包含所有hidden input的form里，直接找form比向上找tr再找input少了一层DOM遍历，逻辑更简洁。
2. 你也可以用e.currentTarget代替代码里的el，两者都指向当前绑定点击事件的按钮元素，效果完全一致。
3. 如果后续页面结构有调整，给form加一个专属类名（比如status-operation-form），可以让querySelector的定位更精准，避免和其他form冲突。

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