Jquery 显示/隐藏某些行时，每隔一行对表格进行着色

我有一个包含活动/非活动用户的表，以及一个下拉列表，一旦更改，它将切换活动或非活动用户的可见性。这很好，但我不知道如何保持每隔一行阴影。我补充说

$（this）.find（“#tableUsers tr”）.not（“：hidden”）.filter（“：偶”）.addClass（“altr”）

下拉列表更改后，将显示到每个函数的末尾，但我的猜测是，无论可见性如何，所有行在开始时都标记为偶数或奇数，并且不会根据它们是否可见而更改。因此，当我加载页面（在活动过滤器上）时，每隔一行都会被正确地着色，但是一旦我更改下拉列表，着色就会被取消（行块被着色）

代码：

你介意分享一下你桌上的标记吗

看起来您正在遍历tr元素并访问“id”属性。每个id属性都应该是唯一的，在您的情况下，您将有多个id值为“userInactive”和“userActive”的tr元素

我还没有对此进行测试，但您可以尝试这种方法。传入一个函数，检查结果选择的索引是偶数还是奇数，并相应地应用类

我完全重写了JavaScript，使其更加简洁高效

对于子孙后代，以下是代码：

HTML

<select id="show">
    <option value="">All</option>
    <option value="active">Active</option>
    <option value="inactive">Inactive</option>
</select>
<table>
    <tr class="active-user"><td>John Doe</td></tr>
    <tr class="active-user"><td>Jane Doe</td></tr>
    <tr class="inactive-user"><td>Tony Stark</td></tr>
    <tr class="active-user"><td>Bruce Wayne</td></tr>
    <tr class="inactive-user"><td>Clark Kent</td></tr>
    <tr class="inactive-user"><td>Lois Lane</td></tr>
    <tr class="active-user"><td>Peter Parker</td></tr>
    <tr class="active-user"><td>Harry Osborne</td></tr>
    <tr class="active-user"><td>Mary Jane Watson</td></tr>
    <tr class="inactive-user"><td>Bruce Banner</td></tr>
</table>

JS

tr.alt { background:#c0c0c0; }

function toggleRows() {
    var selected = $('#show').val();

    switch (selected) {
        case 'active':
            var $rows = $('.active-user');
            $rows.show();
            $('.inactive-user').hide();
            break;
        case 'inactive':
            var $rows = $('.inactive-user');
            $rows.show();
            $('.active-user').hide();
            break;
        default:
            var $rows = $('tr');
            $rows.show();
    }
    $rows.removeClass('alt').filter(':even').addClass('alt');
}

toggleRows();

$('#show').change(function(){
    toggleRows();
});

您的代码似乎表明您在页面上多次使用id。一个id每页只能有一次；改用类。
tr.alt { background:#c0c0c0; }

function toggleRows() {
    var selected = $('#show').val();

    switch (selected) {
        case 'active':
            var $rows = $('.active-user');
            $rows.show();
            $('.inactive-user').hide();
            break;
        case 'inactive':
            var $rows = $('.inactive-user');
            $rows.show();
            $('.active-user').hide();
            break;
        default:
            var $rows = $('tr');
            $rows.show();
    }
    $rows.removeClass('alt').filter(':even').addClass('alt');
}

toggleRows();

$('#show').change(function(){
    toggleRows();
});