如何隐藏包含class为'hidable'的TD元素的所有TR元素？

可以通过两种常用方式实现需求：

1. CSS 方法（现代浏览器推荐） #

利用 CSS 的 :has() 伪类直接匹配包含指定子元素的父元素，代码简洁且无需脚本：

#tab tr:has(.hidable) {
  display: none;
}

tr:has(.hidable) 会精准选中 id="tab" 的表格里，所有包含 class 为 hidable 的 TD 的 TR 元素，通过 display: none 完成隐藏。目前主流浏览器（Chrome 101+、Firefox 121+、Safari 15.4+）都支持 :has() 伪类。

2. JavaScript 方法（兼容旧浏览器） #

如果需要兼容不支持 :has() 的旧浏览器，可以用脚本实现：

// 找到表格中所有带hidable类的TD元素
const hidableCells = document.querySelectorAll('#tab .hidable');

// 遍历每个目标TD，找到它所在的TR并隐藏
hidableCells.forEach(cell => {
  const targetRow = cell.closest('tr');
  if (targetRow) {
    targetRow.style.display = 'none';
  }
});

如果需要更灵活的显示隐藏切换（比如后续要恢复显示），建议通过添加/移除 CSS 类的方式实现：

/* 预先定义隐藏类 */
.hidden-row {
  display: none;
}

// 给目标TR添加隐藏类
hidableCells.forEach(cell => {
  const targetRow = cell.closest('tr');
  if (targetRow) {
    targetRow.classList.add('hidden-row');
  }
});

// 后续需要恢复时移除类即可
// targetRow.classList.remove('hidden-row');

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