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>

jquery：可见和：奇数选择器无法正常工作

1 个答案: