Javascript HTML 条件显示行表失去表列对齐

Question

HTML/Javascript 专家您好，

我需要在浏览器中渲染大型表格（至少几百行）。为了帮助导航，我想通过检查按钮打开和关闭行的子集，以减小实际显示的表格的大小。

我发现了两种方法，不幸的是两者都只能工作一半......

每行标签使用
```
class
```
属性
使用 JavaScript 函数切换
```
display
```
```
 返回的元素的 (1) 
```
visibility
```
 或 (2) 
```
document.getElementsByClassName()

到目前为止，这些方法的问题在于：

(1) 修改
```
display
```
会破坏行的格式
(2) 修改
```
visibility
```
不会使表格变小，只是将“停用”行保留为空白空间

当然，我可以通过删除并重新插入有问题的行来修改表数据。但我的问题是：

HTML/JavaScript 是否提供了一种方法来修改实际显示的表格行子集并保持表格格式完整？

这是我当前的代码，使用 2 个类 myClass 和 myOtherClass 以及使用

display

或

visibility

的 2 种修改技术

<!DOCTYPE html>
<html>
  <body>
    <script>
      function toggleDisplay(aClass) {
        // console.log("toggleDisplay(" + aClass + ") ...");
        elementsArray = document.getElementsByClassName(aClass);
        [...elementsArray].forEach((element, index, array) => {
          // console.log("toggleDisplay(" + aClass + ") got element:" + element + " display:" + element.style.display + " ...");
          if(element.style.display === '') element.style.display = 'block'
          else element.style.display = element.style.display === 'none' ? 'block' : 'none' 
        }
        );
      }
      function toggleVisibility(aClass) {
        elementsArray = document.getElementsByClassName(aClass);
        [...elementsArray].forEach((element, index, array) => {
          // console.log("toggleVisibility(" + aClass + ") got element:" + element + " visibility:" + element.style.visibility + " ...");
          if(element.style.visibility === '') element.style.visibility = 'visible'
          else element.style.visibility = element.style.visibility === 'hidden' ? 'visible' : 'hidden' 
        }
        );
      }
    </script>
    <style>
table, th, td {
  border: 2px solid;
}
    </style>

    <p>
    <input id="toggleDisplay" type="checkbox" onclick="toggleDisplay('myClass');" >
    <label for="toggleDisplay">toggle myClass display</label>
    <input id="toggleOtherDisplay" type="checkbox" onclick="toggleDisplay('myOtherClass');" >
    <label for="toggleOtherDisplay">toggle myOtherClass display</label>
    </p><p>
    <input id="toggleVisibility" type="checkbox" onclick="toggleVisibility('myClass');" >
    <label for="toggleVisibility">toggle myClass visibility</label>
    <input id="toggleOtherVisibility" type="checkbox" onclick="toggleVisibility('myOtherClass');" >
    <label for="toggleOtherVisibility">toggle myOtherClass visibility</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>

Answer 1

在您的情况下，您可以尝试使用

visibility:collapse

，它在与表一起使用时具有特殊行为（请参阅 MDN 文档）。您的简化示例如下：

table,
th,
td {
  border: 2px solid;
}

#toggleVisibility:checked ~ table tr.myClass,
#toggleOtherVisibility:checked ~ table tr.myOtherClass {
  visibility: collapse
}

<input id="toggleVisibility" type="checkbox">
<label for="toggleVisibility">toggle myClass visibility</label>
<input id="toggleOtherVisibility" type="checkbox">
<label for="toggleOtherVisibility">toggle myOtherClass visibility</label>

<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>long row 2</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>

Javascript HTML 条件显示行表失去表列对齐

问题描述投票：0回答：1

1个回答

最新问题

Javascript HTML 条件显示行表失去表列对齐

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1