Question

我有一个动态表，根据用户事件，表的行数会发生变化。我的tr而不是.selected的{{1}}设置为display:none; - 并且完全有可能没有表格行。当我设置display:none时，除了原始第一行有类selected之外，问题是表标题消失了。换句话说，仅当选择第一行时才会出现标题。我认为这是有道理的，但是在处理display:none;时有没有办法解决这个问题？我希望表头始终可见，无论隐藏哪些行。

tr:not(.selected) {
    display:none;
}

我尝试添加not(:first-child)这样的内容，但都没有效果。我使用这种方法是在正确的轨道上吗？我认为动态添加和删除行会涉及太多的迭代或减慢速度。

Answer 1

首先，不需要not之后的冒号，所以删除它：

tr:not(.selected) {
  display: none;
}

至于仅隐藏没有.selected类的数据行（而不是标题行），有几种方法可以实现这一点。我建议您使用<thead>和<tbody>分割您的表格：

<table>
  <thead>
    <tr>
      <th>
        Heading 1
      </th>
      <th>
        Heading 2
      </th>
      <th>
        ....
      </th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <!-- your data here -->
    </tr>
  </tbody>
</table>

然后您可以使用以下CSS来确保只有表的主体中的行 - 而不是其标题 - 在没有.selected类的情况下消失：

tbody tr:not(.selected) {
  display: none;
}

始终显示表格标题，同时显示所有行：隐藏;

1 个答案: