Question

我有一个函数，当我搜索某个单词

时会隐藏表格的行

table.find (el + ': not (' + criteria + ')').Parent().hide()

此命令返回非隐藏线，即我的过滤器的结果：

  console.log(table.find (el + criteria) .parent (). parent ())

日志结果：

 [tbody, tbody, prevObject: n.fn.init[2], context: table#tableQuest.table.table-striped.table-hover.form-group]
    0: tbody
    1: tbody
    context: table#tableQuest.table.table-striped.table-hover.form-group
    length: 2
    prevObject: n.fn.init[2]
    __proto__: n[0]

过滤器运行正常，但我想应用此行：

$('tbody').parents('table#tableQuest').find('tr:even').not(':first').addClass( 'even' )

.even { background: #f9f9f9; }

此行使表行接收交替颜色/条纹。但是它被应用于整个表格，我只想要tbody 0和1。

搜索文本'2'时...返回条纹行..不会碰撞相同的颜色

小提琴 - ＆gt; fiddle

我将非常感激。

解决方案 https://jsfiddle.net/68v4a0gx/14/

Answer 1

试试这个：

even:nth-child(1):{
background: #f9f9f9;
}

Answer 2

 $(document).ready(function () {
			 $('tbody').parents('table#tableQuest').find('tr:even').not(':first').addClass( 'even' );
     
 });


//funtion filter row

$('table#tableQuest').each(function(){
    var table = $(this)
    var headers = table.find('th').length
    var filterrow = $('<tr>').insertAfter($(this).find('th:last()').parent())
	
	 for (var i = 0; i < headers; i++){
	        filterrow.append($('<th>').append($('<input class="" id="iconified_tabquest'+i+'" style="align:center" placeholder="find...">').attr('type','text').keyup(function(){	 	

			table.find('tr').show()
            
            //here
            $('#tableQuest tr').removeClass("even")   
			$('tbody').parents('table#tableQuest').find('tr:even').not(':first').addClass( 'even' )	
            
            
			
	           filterrow.find('input[type=text]').each(function(){
		            var index = $(this).parent().index() + 1
		            var filter = $(this).val() != ''
		            $(this).toggleClass('filtered', filter)
		            if (filter){
		                var el = 'td:nth-child('+index+')'
		                var criteria = ":contains('"+$(this).val()+"')"
		                table.find(el+':not('+criteria+')').parent().hide()	
                        
                        //and here
						$('#tableQuest tr').removeClass("even")                        
                        $("#tableQuest tr:visible:even").not(':first').addClass("even")
					
		            }
	            })	
	        })))
	    }
	})

.even { background: red; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-striped" id="tableQuest">
							<thead>
							<tr>


								<th style="width:100%;" id="th_sort_quest_quest">
									<div id="div_sort_quest_quest"><div class="th-inner sortable" id="div_sort_quest_quest">Quest</div></div>
								</th>

							</tr
							</thead>
								
							<tbody>
								<tr class="trDetail" id="trDetail1" style="display: table-row;">
								<td style="text-align:center;"><a class="" data-id="1" href="">
								<span data-toggle="tooltip" data-placement="top" data-html="true" title="" class="badge2" data-original-title="D">Test test 1</span>
								</a></td>	
							</tbody>
							
							<tbody>
								<tr class="trDetail" id="trDetail1" style="display: table-row;">
								<td style="text-align:center;"><a class="" data-id="1" href="">
								<span data-toggle="tooltip" data-placement="top" data-html="true" title="" class="badge2" data-original-title="D">Test test 2</span>
								</a></td>	
							</tbody>
							
							<tbody>
								<tr class="trDetail" id="trDetail1" style="display: table-row;">
								<td style="text-align:center;"><a class="" data-id="1" href="">
								<span data-toggle="tooltip" data-placement="top" data-html="true" title="" class="badge2" data-original-title="D">Test test 3</span>
								</a></td>	
							</tbody>
                                
                                							<tbody>
								<tr class="trDetail" id="trDetail1" style="display: table-row;">
								<td style="text-align:center;"><a class="" data-id="1" href="">
								<span data-toggle="tooltip" data-placement="top" data-html="true" title="" class="badge2" data-original-title="D">Test test 22</span>
								</a></td>	
							</tbody>

		</table>

在tbody标签中应用某个类

2 个答案: