总是显示表头，而所有行都显示：隐藏;

Question

我有一个动态表，并根据用户事件，表的行数改变。我的tr不是.selected类别的设置为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; 
}