Question

我想根据下拉框的值切换表格中某些行的可见性。我已经有了每个行的类，所以我决定将userType作为属性（由PHP生成）添加到<tr>。但是，当我使用我用于使用类选择器切换行的可见性的相同函数时，它不适用于$('tr[userType="User"]');。我一直在寻找为什么这个选择器没有返回正确的数组，但没有任何运气。任何帮助将非常感激。

功能：

function toggleUserTypeRows(){
    var selected = $('#userTypeDropDown').val();
    switch (selected){
        case 'User':
            var $rows = $('tr[userType="User"]');
            $rows.show();
            $('tr[userType="Admin"]').hide();
            break;

        case 'Admin':
            var $rows = $('tr[userType="Admin"]');
            $rows.show();
            $('tr[userType="User"]').hide();
            break;
        default:
            var $rows = $('#tableUsers tr');
            $rows.show();
    }
}

Answer 1

使用filter()

例如：

     case 'User':
        var $rows = $('tr').filter(function(){
             return $(this).attr('userType') == 'User';
        });
        ...

Answer 2

<table>
    <tr userType="Admin"><td>Row 1</td></tr>
    <tr userType="User"><td>Row 2</td></tr>  
    <tr userType="Admin"><td>Row 3</td></tr>
    <tr userType="User"><td>Row 4</td></tr>     
 </table>


<select>
    <option value="User">User</option>
    <option value="Admin">Admin</option>
</select>

<script type="text/javascript">

$('select').change(function(e){
    var userType = $(this).val();
    $('table tr').show();
    $('table tr[userType="'+ userType +'"]').hide();
});

</script>

无法使用属性选择器获取数组

2 个答案: