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在页面加载时的可见行上应用行条带，也可以在更改过滤器时应用，如下所示：

＆＃13;

$("#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'));

＆＃13;

<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>

＆＃13;

请注意，上述内容仅在tr内搜索tbody，而不是明确排除索引0处的行。

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

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

CSS奇和＆amp;甚至在动态表上

2 个答案: