Question

我有一个包含多个条目的表格，我使用我在此网站上找到的jQuery脚本进行过滤，效果很好，但在我过滤后，它没有保留我放入我的正确tr:nth-child(odd)颜色CSS。或者更确切地说，它保留了原始列表的颜色而不是过滤的颜色（希望这是有意义的。如果没有，那么底部的JSFiddle演示应该清除它）。我对JavaScript / jQuery一无所知，所以我需要帮助。我需要一种方法来在过滤后保持每个奇数行的灰色。

HTML

<input type="text" id="search" placeholder="Search...">
<table id="table">
  <tr>
    <th>Name</th>
    <th>Age</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Chantal</td>
    <td>37</td>
    <td>Belgium</td>
  </tr>
  <tr>
    <td>Pedro</td>
    <td>31</td>
    <td>Spain</td>
  </tr>
  <tr>
    <td>John</td>
    <td>51</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Vadim</td>
    <td>24</td>
    <td>Romania</td>
  </tr>
  <tr>
    <td>Aleksei</td>
    <td>25</td>
    <td>Russia</td>
  </tr>
  <tr>
    <td>Chantal</td>
    <td>37</td>
    <td>Belgium</td>
  </tr>
  <tr>
    <td>Pedro</td>
    <td>31</td>
    <td>Spain</td>
  </tr>
  <tr>
    <td>John</td>
    <td>51</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Vadim</td>
    <td>24</td>
    <td>Romania</td>
  </tr>
  <tr>
    <td>Aleksei</td>
    <td>25</td>
    <td>Russia</td>
  </tr>
</table>

CSS

#search {
  height: 20px;
  margin: 4px 0;
  padding: 5px 5px;
  border: 1px solid #E5C100;

  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}

table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  margin-top: 2%;
}

th {
  background-color: #CC0000;
  color: #FFFFFF;
  text-align: left;
  padding: 10px;
}

td {
  text-align: left;
  padding: 10px;
}

tr:nth-child(odd) {
  background-color: #E5E5E5;
}

的jQuery

var $rows = $('#table tr:not(:first)');
$('#search').keyup(function() {
    var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();

    $rows.show().filter(function() {
        var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
        return !~text.indexOf(val);
    }).hide();
});

JSFiddle演示

https://jsfiddle.net/8m6p1k96/

谢谢！

Answer 1

请在此处查看更新的小提琴JSFIDDLE或以下代码段：

我删除了tr：nth-child（单数）的CSS，因为当您应用搜索过滤器时，表格将变为动态。因此，通过添加CSS类“zebra-stripe”来初始化带有条带化的表。然后，在您的keyup函数期间，当可见行更改时，通过循环显示可见行重新条带化表行，并将条带类添加到每隔一行，并删除那些可能不是tr：nth的行的条带类-child（单数）可能在之前的动态行集中已经如此。

var $rows = $('#table tr:not(:first)');

// Add stripes to odd # rows..
$('tr:nth-child(odd)').each(function() {
  $(this).addClass('zebra-stripe');
});

$('#search').keyup(function() {
  var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();
  $rows.show().filter(function() {
    var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
    return !~text.indexOf(val);
  }).hide();

  // Re-stripe now visible row set..
  $('#table tr:visible').each(function(e, v) {
    if (e % 2 == 0) {
      $(this).addClass('zebra-stripe');
    } else {
      $(this).removeClass('zebra-stripe');
    }
  });

});

#search {
  height: 20px;
  margin: 4px 0;
  padding: 5px 5px;
  border: 1px solid #E5C100;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}

table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  margin-top: 2%;
}

th {
  background-color: #CC0000;
  color: #FFFFFF;
  text-align: left;
  padding: 10px;
}

td {
  text-align: left;
  padding: 10px;
}

.zebra-stripe {
  background-color: #E5E5E5;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="search" placeholder="Search...">

<table id="table">
  <tr>
    <th>Name</th>
    <th>Age</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Chantal</td>
    <td>37</td>
    <td>Belgium</td>
  </tr>
  <tr>
    <td>Pedro</td>
    <td>31</td>
    <td>Spain</td>
  </tr>
  <tr>
    <td>John</td>
    <td>51</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Vadim</td>
    <td>24</td>
    <td>Romania</td>
  </tr>
  <tr>
    <td>Aleksei</td>
    <td>25</td>
    <td>Russia</td>
  </tr>
  <tr>
    <td>Chantal</td>
    <td>37</td>
    <td>Belgium</td>
  </tr>
  <tr>
    <td>Pedro</td>
    <td>31</td>
    <td>Spain</td>
  </tr>
  <tr>
    <td>John</td>
    <td>51</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Vadim</td>
    <td>24</td>
    <td>Romania</td>
  </tr>
  <tr>
    <td>Aleksei</td>
    <td>25</td>
    <td>Russia</td>
  </tr>
</table>

用jQuery过滤后保持nth-child（奇数）

1 个答案: