Chrome浏览器下表格行高亮功能异常问题排查求助

可能的代码问题点 #

• 选中状态未正确重置：每次点击行时没先清除所有行的高亮类，旧高亮残留导致多行同时被选中。
• 事件冒泡未拦截：点击含禁用checkbox的单元格时，事件冒泡到行，重复触发选中逻辑。
• 事件重复绑定：若在Offcanvas的显示/隐藏回调中重复绑定行点击事件，会导致单次点击触发多次选中操作，状态混乱。
• Offcanvas状态不同步：Offcanvas隐藏时未同步清除行的选中状态，再次操作时旧状态残留。

修复步骤 #

1. 统一重置高亮状态
   每次点击行时，先移除所有行的高亮类，再为当前行添加高亮：

document.querySelectorAll('table tr').forEach(tr => {
  tr.addEventListener('click', function(e) {
    // 清除所有行的高亮
    document.querySelectorAll('table tr.table-active').forEach(row => row.classList.remove('table-active'));
    // 高亮当前行
    this.classList.add('table-active');
    // 触发Offcanvas显示
    const offcanvas = new bootstrap.Offcanvas(document.getElementById('yourOffcanvasId'));
    offcanvas.show();
  });
});

2. 拦截禁用checkbox单元格的事件冒泡
   阻止禁用checkbox所在单元格的点击事件冒泡到行，避免重复触发选中逻辑：

document.querySelectorAll('table td:has(input[type="checkbox"]:disabled)').forEach(td => {
  td.addEventListener('click', e => e.stopPropagation());
});

3. 确保事件只绑定一次
   将事件绑定放在DOM加载完成的回调中，避免重复绑定：

document.addEventListener('DOMContentLoaded', function() {
  // 这里统一绑定行点击、单元格拦截等事件
});

4. 同步Offcanvas隐藏时的选中状态
   Offcanvas隐藏时清除所有行的高亮，避免状态残留：

document.getElementById('yourOffcanvasId').addEventListener('hide.bs.offcanvas', function() {
  document.querySelectorAll('table tr.table-active').forEach(row => row.classList.remove('table-active'));
});

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