Question

我基于手动添加的类（'myTable'）在表（'myClass'）中动态隐藏行。该表使用带有标准斑马条纹背景颜色的Datables插件。

有没有办法在手动隐藏该表格中的行后保留这些斑马条纹？

通过使用标准Datatables函数对表进行排序和过滤时，这可以正常工作，因此我假设有一个设置允许这样做。

我正在使用基于我手动添加的类的简单显示/隐藏功能：

$('.myClass').hide(); / $('.myClass').show();

有人可以帮助我吗？

提前非常感谢，蒂姆。

Answer 1

我也使用数据表。喜欢它，但不要使用添加的类“斑马条纹”＃39;大声笑。

如果您的用户已经过IE8，您可以让CSS这样做：

tr:nth-child(even) {
    background-color: #000000;
}

编辑：根据评论。如果你将隐藏行而不是删除它们，jQuery是最好的答案。请注意＆＃34; ：可见 ＆＃34;在选择器中。使用addClass会是一个更好的调用，因此我们可以在对表进行条带化之前从tr选择器中删除Class。

或者使用jQuery：

$(document).ready(function()
{
    $("tr:visible:even").css("background-color", "#000000");
});

Answer 2

所选解决方案将出现图形故障。如果使用css设置基本样式然后使用给定的jquery覆盖它们，则需要重置“奇数”和“偶数”，每次过滤时都使用内联样式。这绝对是一个选择，但我只想给你另一个我今天实现的（因为这个在谷歌之上）：

首先，构建一个这样的额外表：

<table id="filteredOutTable" style="display:none;">
  <tbody>
  </tbody>
</table>

然后使用jquery移动数据，如下所示：

if(<move out of table>){
  $('#dataTableID tbody .rowClass').detach().appendTo('filteredOutTable tbody');
}
if(<move to table>){
  $('#filteredOutTable tbody .rowClass').detach().appendTo('#dataTableID tbody');
}

这比简单的内联样式更重，具体取决于您拥有的行数，但它可以保证您免受斑马相关的图形问题的影响。 CSS可以毫无问题地使用它。

数据表：隐藏/显示表行后保留斑马条纹

2 个答案: