JQuery: видимые и: нечетные селекторы не работают должным образом

Question

У меня есть функция, которая фильтрует таблицу с помощью типизированного ввода

$('#searchBox').keyup(function() { 
     var key = $(this).val(); 
     filterBySearchBox(key); 
     $('#adminTable tr').removeClass("odd"); 
     $('#adminTable tr:visible:odd').addClass("odd"); 
    }); 

Функции скрывает строки, которые не соответствуют входу, я тогда хочу заново стиль в стол с чередующимися цветами строк. В настоящее время, когда пользователь вводит ключ, стиль ведет себя очень неустойчиво, работая по случаю. Фильтр работает отлично.

p.s. Я использую IE9

EDIT моя функция filterBySearchBox ниже

function filterBySearchBox(key) { 
    var $rows = $('#adminTable tr:visible'); 
    var val = $.trim(key).replace(/ +/g, ' ').toLowerCase(); 
    $rows.show().filter(function() { 
     var text = $(this).text().replace(/\s+/g, ' ').toLowerCase(); 
     return !~text.indexOf(val); 
    }).hide(); 
} 

Answer 1

Взгляните на этот код, это может удовлетворить ваши потребности:

jQuery("table tr:even").css("background-color", "red"); 
 
jQuery("table tr:odd").css("background-color", "yellow"); 
 

 
$("#filter").keyup(function() { 
 
    jQuery("table tbody tr").show(); 
 
    jQuery("table td:contains('"+$("#filter").val()+"')").parent().hide(); 
 
    var $trs = jQuery("table tbody tr:visible"); 
 
    $trs.filter(":even").css("background-color", "red"); 
 
    $trs.filter(":odd").css("background-color", "yellow"); 
 
});

table { 
 
    border: 1px solid black; 
 
    border-collapse: collapse; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> 
 
<input type="text" id="filter" value=""> 
 
<table> 
 
    <tr><td>Item 1</td></tr> 
 
    <tr><td>Item 2</td></tr> 
 
    <tr><td>Item 3</td></tr> 
 
    <tr><td>Item 4</td></tr> 
 
    <tr><td>Item 5</td></tr> 
 
</table>