javascript - 动态表上的CSS奇数和偶数

我正在将以下jQuery应用于输入字段，以缩小表中显示的项目列表（真实的table，具有tr和td布局）：

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

        $(".table").find("tr").each(function(index) {
            if (index === 0) return;
            var id = $(this).find("td").text().toLowerCase();
            $(this).toggle(id.indexOf(value) !== -1);
        });
    });
});

否则，它可以完美地工作，但是由于.table具有用于初始布局的.table tr:nth-child(odd)和(even)目标样式，因此应用列表缩小搜索过滤器时，奇数和偶数行会变得混乱。

到目前为止，当行动态更改时，我对removeClass和addClass不走运，我是否缺少一些必要的内容。

可以在https://jsfiddle.net/4cf8a01L/3/处查看JSFiddle示例

最佳答案

有点黑的方式-https://jsfiddle.net/6rk09jb0/1/

增加奇数和偶数类

.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);
  });
});