HTML/JavaScript表格行条件显示时如何保持列对齐且缩减尺寸？

你的核心问题出在切换display属性时用了block——表格行<tr>的默认显示属性是table-row，强行改成block会破坏表格的原生布局逻辑。而visibility:hidden本身就只是隐藏内容但保留占位，肯定不符合你缩减表格尺寸的需求。

直接给你两种靠谱的解决方案：

方案1：修正display属性值 #

不用block，改用表格行原生的table-row来控制显示，隐藏时用none，这样既会移除行的占位，又完全保留表格格式。

修正后的JavaScript函数：

function toggleDisplay(aClass) {
  const elementsArray = document.getElementsByClassName(aClass);
  [...elementsArray].forEach(element => {
    // 初始状态下元素style.display为空，默认是table-row
    if (element.style.display === '') {
      element.style.display = 'none';
    } else {
      element.style.display = element.style.display === 'none' ? 'table-row' : 'none';
    }
  });
}

方案2：用CSS类控制（更易维护） #

把显示隐藏逻辑放到CSS里，JavaScript只负责切换类名，这种方式更清晰，尤其是处理大量行的时候性能更好。

第一步：添加CSS类 #

.hidden-row {
  display: none;
}
table, th, td {
  border: 2px solid;
}

第二步：修改JavaScript函数 #

function toggleRowClass(aClass) {
  const elementsArray = document.getElementsByClassName(aClass);
  [...elementsArray].forEach(element => {
    element.classList.toggle('hidden-row');
  });
}

第三步：更新HTML里的复选框事件 #

<input id="toggleDisplay" type="checkbox" onclick="toggleRowClass('myClass');" >
<label for="toggleDisplay">toggle myClass display</label>
<input id="toggleOtherDisplay" type="checkbox" onclick="toggleRowClass('myOtherClass');" >
<label for="toggleOtherDisplay">toggle myOtherClass display</label>

完整改进后的代码 #

<!DOCTYPE html>
<html>
  <body>
    <script>
      function toggleRowClass(aClass) {
        const elementsArray = document.getElementsByClassName(aClass);
        [...elementsArray].forEach(element => {
          element.classList.toggle('hidden-row');
        });
      }
    </script>
    <style>
.hidden-row {
  display: none;
}
table, th, td {
  border: 2px solid;
}
    </style>

    <p>
    <input id="toggleDisplay" type="checkbox" onclick="toggleRowClass('myClass');" >
    <label for="toggleDisplay">toggle myClass display</label>
    <input id="toggleOtherDisplay" type="checkbox" onclick="toggleRowClass('myOtherClass');" >
    <label for="toggleOtherDisplay">toggle myOtherClass display</label>
    </p>
    <table>
      <tr><th>X</th><th>Y</th><th>Z</th></tr>
      <tr><td>row1</td><td>A</td><td>B</td></tr>
      <tr class="myClass"><td>row2</td><td>C</td><td>D</td></tr>
      <tr class="myClass myOtherClass"><td>row3</td><td>E</td><td>F</td></tr>
      <tr><td>row4</td><td>G</td><td>H</td></tr>
    </table>
  </body>
</html>

这两种方案都能满足你的需求：隐藏行时表格尺寸自动缩减，显示时完全保留表格的边框、列对齐等原生格式，而且比删除重新插入行的性能要好得多，尤其适合几百行的大型表格。

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