如何让HTML表格默认隐藏所有行，再通过JavaScript显示指定行？

当然可以！你的思路完全没问题，只需要调整下JavaScript的执行逻辑，就能轻松实现「默认隐藏所有行，仅显示指定行」的效果。我基于你的示例代码，给你整理了完整的实现方案：

完整代码示例 #

<table>
  <tr>
    <td>John</td>
  </tr>
  <tr>
    <td>Ida</td>
  </tr>
  <tr>
    <td>Thor</td>
  </tr>
  <tr>
    <td>Diana</td>
  </tr>
  <tr>
    <td>Chris</td>
  </tr>
</table>

<script>
// 确保DOM加载完成后再执行脚本，避免找不到元素
document.addEventListener('DOMContentLoaded', () => {
  // 获取所有表格行（如果有表头，建议用'table tbody tr'来排除表头）
  const allRows = document.querySelectorAll('table tr');

  // 第一步：默认隐藏所有行
  allRows.forEach(row => {
    row.style.display = 'none';
  });

  // 定义需要显示的名称列表——后续改需求直接改这个数组就行
  const targetNames = ['Diana', 'Chris'];

  // 第二步：筛选并显示目标行
  allRows.forEach(row => {
    // 获取当前行的文本内容（如果名称在特定列，比如第2列，可改成row.querySelector('td:nth-child(2)').textContent.trim()）
    const rowContent = row.textContent.trim();
    if (targetNames.includes(rowContent)) {
      row.style.display = 'table-row';
    }
  });
});
</script>

关键逻辑说明 #

1. DOM加载保障：用DOMContentLoaded包裹代码，确保脚本在表格元素完全加载后再执行，避免出现「找不到行元素」的错误；
2. 全局隐藏：先遍历所有表格行，设置display: none实现默认隐藏；
3. 精准显示：通过定义目标名称数组，遍历行时检查内容是否匹配，匹配的行恢复display: table-row显示。

如果你的表格结构更复杂（比如有多列、带表头），只需要微调选择器和文本获取逻辑就行——比如有表头的话，把获取行的选择器改成table tbody tr，这样就不会隐藏表头行啦。

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