动态表上的 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);
  });
});

Answer 2

不幸的是，:nth-child 考虑了所有子元素，无论它们的可见性如何。要解决此问题，您可以使用 jQuery 在页面加载时以及在更改过滤器时将行条纹应用于可见行，如下所示：

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

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

  stripeRows($table);
});

function stripeRows($table) {
  $table.find('tr:visible:odd').css('background', '#FFFFFF');
  $table.find('tr:visible:even').css('background', '#C0C0C0');
}
stripeRows($('table'));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="search" autofocus>
<table class="table">
  <thead>
    <tr>
      <th>title 1</th>
      <th>title 2</th>
      <th>title 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>data</td>
      <td>goes</td>
      <td>here</td>
    </tr>
    <tr>
      <td>and</td>
      <td>then</td>
      <td>here</td>
    </tr>
    <tr>
      <td>rows</td>
      <td>repeat</td>
      <td>this way</td>
    </tr>
    <tr>
      <td>consisting</td>
      <td>of hundres</td>
      <td>of rows</td>
    </tr>
    <tr>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
    </tr>
    <tr>
      <td>content</td>
      <td>content</td>
      <td>content</td>
    </tr>
  </tbody>
</table>

请注意，以上仅在tbody 中搜索tr，而不是显式排除索引0 处的行。

或者你可以使用你现在的CSS，但是你需要在过滤时remove()或detach()tr，然后还有一个系统将它们放回正确的位置，通过排序或明确设置他们的位置。

虽然此解决方案的 CSS 会更简单，但所需的逻辑会复杂得多。