如何通过内联JavaScript隐藏自动生成表格的当前行（仅可修改td）

JavaScript 实现（兼容性最优） #

直接在可编辑的<td>中插入以下脚本即可，你之前用的document.parentrow不是标准DOM方法，所以无效，换成下面的标准写法：

<td>
  <!-- 这里保留原有的td内容 -->
  <script>
    // 两种写法任选其一
    // 写法1：逐层向上获取父元素
    const currentTd = document.currentScript.parentElement;
    const parentTr = currentTd.parentElement;
    parentTr.style.display = 'none';

    // 写法2：用closest方法一步定位父行，更简洁
    // document.currentScript.parentElement.closest('tr').style.display = 'none';
  </script>
</td>

如果需要统一管理隐藏样式，可以先在页面的样式区域定义一个隐藏类：

.hidden-row { display: none; }

再把脚本改成给父行添加这个类：

document.currentScript.parentElement.closest('tr').classList.add('hidden-row');

CSS 实现（适合现代浏览器） #

如果不想用JavaScript，给目标<td>添加自定义属性，再通过CSS选择器定位父行：

1. 给<td>添加自定义属性：

<td data-hide-parent>
  <!-- 保留原有的td内容 -->
</td>

2. 添加对应的CSS规则：

tr:has(> td[data-hide-parent]) {
  display: none;
}

注意：:has()选择器仅支持现代浏览器，IE完全不兼容，若需要兼容旧版本浏览器，优先选择JavaScript方案。

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