JavaScript实现点击按钮时立即隐藏 适配query_id为8的报表页面

问题原因 #

你现有代码无法实现点击即时隐藏的核心问题是var声明的循环变量i存在闭包陷阱：for循环同步执行完成后，i的值会固定为循环的最终值，点击事件异步触发时，用这个最终值查找元素会找不到对应行的按钮，因此隐藏逻辑不生效。

修复后的代码 #

else if (query_id == 8) {
  setTimeout(function() {
    var table = document.getElementById('tablekit-table-1')
    var tableCount = table.rows.length
    var types = document.querySelectorAll('[id^="col_Mail Bildirim Tarih"]');
    // 把var改成let，形成块级作用域，避免闭包问题
    for (let i = 0; i < tableCount - 1; i++) {
      const notifyBtn = document.getElementById("col_Mail Bildirim_" + i)
      notifyBtn.onclick = function() {
        // 直接用this指向当前点击的元素，不需要依赖i查找
        this.children[0].style.display = 'none';
      }
      if (types[i].children[0].innerHTML != "") {
        notifyBtn.children[0].style.display = 'none'
      }
    }
  }, 500);
}

修改说明 #

• 循环变量改用let声明，每个循环迭代都会生成独立的块级作用域，避免闭包导致的索引取值错误
• 点击事件回调内直接用this指代当前触发点击的按钮父元素，不需要再通过id查找元素，逻辑更稳定
• 点击后会直接修改当前按钮的展示状态，不需要等待页面刷新即可生效
• 保留了原有页面初始化时，日期字段非空自动隐藏按钮的逻辑不变

内容的提问来源于stack exchange，提问作者Uğur Avcı