如何禁用HTML表格中标记为disabled的行的用户交互

完全可以不用JavaScript，用纯CSS就能搞定这个问题，给你两个实用的方案：

方案一：利用pointer-events和user-select快速实现 #

这是最简洁的方法，直接给标记为disabled的表格行添加以下CSS：

tr.disabled {
  filter: blur(3px); /* 你已有的模糊效果 */
  pointer-events: none; /* 阻止所有鼠标交互（点击、拖拽、悬停等） */
  user-select: none; /* 禁止选中文本 */
  opacity: 0.7; /* 可选：再加个透明度强化禁用视觉效果 */
}

• pointer-events: none会让该行所有子元素（包括select输入框、可拖拽单元格）都无法接收鼠标事件，完美解决点击、拖拽问题；
• user-select: none则直接禁止用户选中文本，彻底切断交互可能性；
• 这个方案不需要额外添加DOM元素，代码量极少，兼容性也很好（现代主流浏览器都支持）。

方案二：用伪元素添加透明覆盖层（更彻底的拦截） #

如果遇到某些特殊场景（比如个别浏览器对pointer-events的支持有瑕疵），可以给禁用行添加一个全屏的透明覆盖层，完全挡住下方的内容：

tr.disabled {
  filter: blur(3px);
  position: relative; /* 让伪元素相对于该行定位 */
  user-select: none;
}

tr.disabled::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: transparent; /* 透明不影响视觉 */
  z-index: 10; /* 确保覆盖在所有子元素上方 */
  pointer-events: auto; /* 让覆盖层接收鼠标事件，下方元素就无法触发交互了 */
}

这个方案相当于给禁用行盖了一层“隐形盾牌”，任何鼠标操作都会被这层伪元素接住，完全不会触发行内的交互元素，视觉上也不会有任何影响。

注意事项 #

• 如果你的表格行有position: relative的子元素，记得调整伪元素的z-index值，确保它能覆盖在所有子元素之上；
• 两种方案都能满足你的需求，优先推荐方案一，更简洁高效。

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