Question

我有一个包含有效/无效用户的表，以及一个下拉菜单，一旦更改，就会切换活动或非活动用户的可见性。这工作正常，但我无法弄清楚如何保持每隔一行阴影。我添加了

$(this).find("#tableUsers tr").not(":hidden").filter(":even").addClass("altr");

一旦下拉列表发生变化，

到每个函数的末尾，但我的猜测是所有行都不管可见性在开始时被标记为偶数或奇数，并且不会根据它们是否可见而改变。因此，当我加载页面时（在Active过滤器上），每隔一行都会正确着色，但是一旦我更改了下拉列表（阴影的行被着色），阴影就会被抛弃。

代码：

$(document).ready(function(){

    // on load, show only active users
    $('#tableUsers tr').each(function(){
                var status = ($(this).attr('id'));
                if (status == 'userInactive'){
                    $(this).hide();
                }
                else if (status == 'userActive'){
                    $(this).show();
                }               
    });

    $(this).find("#tableUsers tr").not(":hidden").filter(":even").addClass("altr");


    $('#userTypeDropDown').change(function(){
        var option = $(this).val();

        if (option == 'Active'){
            $('#tableUsers tr').each(function(){
                var status = ($(this).attr('id'));
                if (status == 'userInactive'){
                    $(this).hide();
                }
                else if (status == 'userActive'){
                    $(this).show();
                }
            });
            $(this).find("#tableUsers tr").not(":hidden").filter(":even").addClass("altr");
        }

        if (option  == 'Inactive'){
            $('#tableUsers tr').each(function(){
                var status = ($(this).attr('id'));
                if (status == 'userActive'){
                    $(this).hide();
                }
                else if (status == 'userInactive'){
                    $(this).show();
                }
            });
            $(this).find("#tableUsers tr").not(":hidden").filter(":even").addClass("altr");
        }

        if (option  == 'Both'){
            $('#tableUsers tr').each(function(){
                    $(this).show();
            });
            $(this).find("#tableUsers tr").not(":hidden").filter(":even").addClass("altr");
        }

    });
});

Answer 1

你介意从桌子上分享你的标记吗？

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

Answer 2

$(this).find("#tableUsers tr")
    .not(":hidden")
    .filter(function(index){
        return index % 2 === 0;
    })
    .addClass("altr");

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

Answer 3

这是一个有效的jsfiddle：http://jsfiddle.net/E8wvK/

我完全重写了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>

<强> CSS

tr.alt { background:#c0c0c0; }

<强> JS

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();
});

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

3 个答案: