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

Question

我正在使用以下应用于输入字段的 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 示例

Answer 1

有点古怪的方法 - 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);
  });
});