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，当行动态发生动态变化时，我是否缺少一些重要的..？

一个的jsfiddle例如可以检查在https://jsfiddle.net/4cf8a01L/3/

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>

注意的是，以上只是搜索对于tr在tbody内，而不是明确排除索引0处的行。

你也可以用你现在的CSS，但你筛选的时候，然后还必须把它们放回正确的位置的系统，既可以通过分类或明确设置自己的位置需要remove()或detach()的tr。

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