使用 jQuery 隐藏行时 CSS 未更新答案

【问题标题】：CSS not updated when hiding rows with jQuery使用 jQuery 隐藏行时 CSS 未更新
【发布时间】：2013-12-13 19:06:33
【问题描述】：

我有一个表格，其中包含具有不同 CSS 样式 tr:nth-child(2n){...} 的奇数行和偶数行，当我使用文本框和 jQuery 过滤它们时，我会隐藏（）除符合我条件的行之外的所有行。

问题是现在行保持当前样式（因为我假设它们保持位置，尽管它们看不到），所以新的奇数行和偶数行与 CSS 模式不匹配。我该如何解决？

【问题讨论】：

请贴一些代码。

标签： javascript jquery html css html-table

【解决方案1】：

试着按照这个例子：

jQuery('tr:visible').filter(':odd').css({'background-color': 'red'});
jQuery('tr:visible').filter(':even').css({'background-color': 'yellow'});

在这里查看：

http://jsfiddle.net/KSL7j/1/

希望对你有帮助

更新

您可以使用奇数和行 CSS 类检查这个其他示例。

正如 CAbbott 在这个小提琴中所建议的那样：http://jsfiddle.net/KSL7j/21/

【讨论】：

我在这里为您的答案创建了一个基于 css 类的变体：jsfiddle.net/KSL7j/21
是的，但有一点是肯定的，这在纯 CSS 中是不可能的。
需要一个 javascript 解决方案，添加 CSS 类奇数和行，然后用 javascript 操作它们似乎是一种有效的方法。
如果您愿意，您可以随时使用我的示例修改您的答案。我没有把它作为我的答案，因为它只是你所做的事情的变体。
如何设置无背景色？我更喜欢你的答案，但感谢你们所有人:)

【解决方案2】：

nth-child 检查第 n 个子项，而不是第 n 个可见子项或第 n 个任意样式的子项（hide() 只是添加 display:none，仅此而已...）并且永远不会这样做。

我看到了两种可能的解决方案：

1.在过滤后添加偶数/奇数类，只要求可见的类，然后在这些类上使用你的 css

未经测试的代码：

var rows = $(tr[@display=block]);
rows.each(function(){
  var index = rows.index(this);
  if(index%2==0){
    $(this).addClass('even');
  }
  else{
    $(this).addClass('odd');
  }
}

2.真正删除行，而不仅仅是隐藏它们

【讨论】：

选项 2 并不是真正的过滤选项。如果用户使用退格怎么办？您将如何返回已删除的行？

【解决方案3】：

当您使用 hide() 时，它只是将显示设置为无。

dom 的结构未修改，因此第 n 个子项无法按预期工作

您需要删除偶数 tr 以获得您想要的效果。

如果你想重置行。您可以将它们保存在变量中并恢复它们

var rows = $("tr");
var even = rows.filter(":even");

$("#trigger").click(function () {
    even.hide();
    even.remove();
});

http://jsfiddle.net/R2gBt/

【讨论】：

正如我在 Ria Elliger 的帖子中提到的，对于简单的表过滤而言，删除并不是一个好的选择。
我认为该解决方案，但删除行并添加回对于表格外观这样的事情似乎相当“大量工作”
所有解决方案都有其权衡。您可以选择最好的来调整您的要求。我认为@alexoulu 提供了一个很好的解决方案。您可以修改以调整您的需要。 :)