Javascript CSS&；即使在动态表上

我正在使用应用于输入字段的以下jQuery片段来缩小表中显示的项目列表（带有

tr

和

td

布局的真实

表

）：

它在其他情况下工作得很好，但由于

.table

具有

.table tr:n子级（奇数）

和

（偶数）

初始布局的目标样式，因此当应用列表缩小搜索筛选器时，奇数行和偶数行会变得混乱

到目前为止，我对removeClass和addClass一直很不走运，当行动态变化时，我是否遗漏了一些重要的东西

---

一个jsiddle示例可以在

处查看，不幸的是

：n子元素

考虑所有子元素，而不管它们的可见性如何。要解决此问题，您可以使用jQuery在页面加载时以及更改过滤器时，在可见行上应用行条纹，如下所示：

$（“#搜索”）.keyup（函数（）{
var value=this.value.toLowerCase（）；
变量$table=$（'table'）；
$table.find（“tbody tr”）。每个（函数（索引）{
var id=$（this.find（“td”）.text（）.toLowerCase（）.trim（）；
$（this）.toggle（id.indexOf（value）！=-1）；
});
stripeRows（$表）；
});
函数stripeRows（$table）{
$table.find（'tr:visible:odd'）.css（'background'，'#ffffffff'）；
$table.find（'tr:visible:even'）.css（'background'，'#c0'）；
}
stripeRows（$（'table'））

标题1
标题2
标题3
数据
去
在这里
和
然后
在这里
排
重复
这边
组成
百分之一百
一排
单间牢房
单间牢房
单间牢房
所容纳之物
所容纳之物
所容纳之物
这是一种很有技巧的方法-

添加奇偶类

.table tr:nth-child(odd),
.table tr.odd.odd {
  background-color: #fff;
}
.table tr:nth-child(even),
.table tr.even.even {
  background-color: #c0c0c0;
}

过滤时应用奇数和偶数

$("#search").keyup(function() {
  var value = this.value.toLowerCase();

  var count = 0;

  $(".table").find("tr").each(function(index) {
    if (index === 0) return;
    var id = $(this).find("td").text().toLowerCase();
    var test = id.indexOf(value) !== -1;
    var className = '';
    if (test) {
      count += 1;
      className = count % 2 ? 'odd' : 'even';
    }
    $(this).toggle(test).attr('class', className);
  });
});

您必须从DOM中删除这些项（使用
.detach（）
）。然后，从分离元素的“池”（数组）中重新添加所有元素。您需要（以某种方式）记住
（一个类似
数据pos
的属性）的顺序。如果不从DOM中删除，浏览器将应用所有样式。您应该使用
className=count++%2？“奇数'：'偶数'
或简单地将其更改为
count++。另外，您应该避免重复
$（this）
。由于您要将一个类应用于元素，它们将从没有类开始。您应该通过在最后一行添加
.keyup（）
来触发该事件。谢谢，这可以很好地完成此任务。至少对于Fiddle演示，现在我必须让它与plugin一起工作：）@lapingultah您最好使用（在我看来）。我很抱歉，但这个答案真的没有多大帮助。我对此有点失望@PHA的答案是优越的（更快的代码，没有随机CSS扔在中间的JavaScript），并采取了一点关于我的评论（我仍然同意，但他们的答案是好多了）。而且，他们的答案与旧浏览器兼容（对于那些不得不开发不推荐的和不受支持的陷阱的浏览器）。我很抱歉你这么想。至于抛出的“随机css”，可以很容易地修改为使用类。还要注意的是，您说当没有人使用IE4时不支持
：nth child
时，另一个答案在旧浏览器中有效。IE6-8仍然（很少）使用。我之所以有这种感觉，是因为CSS和Javascript的混合，以及极其缓慢的重复选择器
tr:visible
。那么，为什么要将浏览器与旧浏览器的兼容性作为另一个答案的积极点呢？请随时提供另一个答案。就性能而言，我敢打赌这两个都非常相似，因为它们都在表格的各行中循环。@lapingultah我不同意。这个答案实际上更短。它只是在水平方向上有更多的文本。
$("#search").keyup(function() {
  var value = this.value.toLowerCase();

  var count = 0;

  $(".table").find("tr").each(function(index) {
    if (index === 0) return;
    var id = $(this).find("td").text().toLowerCase();
    var test = id.indexOf(value) !== -1;
    var className = '';
    if (test) {
      count += 1;
      className = count % 2 ? 'odd' : 'even';
    }
    $(this).toggle(test).attr('class', className);
  });
});