Question

我有点陷入困境，无法理解这个问题。我已经设置了一些jQuery来识别无线电输入中的值，这些值与表中的值对齐。这是对表进行一些过滤的开始。

我希望发生以下三件事：

每当您点击过滤器并且单元格具有相同的值时，它的行会突出显示
每当您关闭该选项时，它都会被删除
如果页面加载并且已选中某个选项，则该行会在加载时突出显示

jQuery代码：

$(function () {
    // On Change of Radio Buttons
    $('input').on('change', function () {
        var filter = $('input:checkbox[name=filter]:checked').val();

        // Edit the Rows
        $(".gameStatus").filter(function () {
            return $(this).text() == filter;
        }).parent('tr').addClass('filtered');
    });
});

的jsfiddle： http://jsfiddle.net/darcyvoutt/8xgd51mg/

Answer 1

$(function () {
    var filters = [];
    var edit_rows = function () {
        filters = [];
        $('input:checkbox[name=filter]:checked').each(function () {
            filters.push(this.value);
        });

        // Edit the Rows

        $(".gameStatus").each(function () {
            $(this).parent('tr')
              .toggleClass('filtered',
                filters.indexOf($(this).text()) > -1
              );
        });
    }
    edit_rows();

    // On Change of Radio Buttons
    $('input').on('change', edit_rows);
});

jsfiddle

编辑：添加了功能，以便在页面加载时调用

Answer 2

这是替代解决方案......

＆＃13;

$(function () {
    function highlight() {
        
        var filter = $(this).val();
        var checked = this.checked;

        // Edit the Rows
        var affectedRows = $(".gameStatus").filter(function () {
            return $(this).text() == filter;
        });
        
        if (checked) {
            affectedRows.parent('tr').addClass('filtered');
        } else {
            affectedRows.parent('tr').removeClass('filtered');
        }
    }
    
    $('input').each(highlight);
    
    
    // On Change of Radio Buttons
    $('input').on('change', highlight);
});

＆＃13;

.filtered {
    background: tomato;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
    <div class="filters">
        <input type="checkbox" name="filter" id="draft" value="Draft" checked />
        <label for="draft">Draft</label>
        <input type="checkbox" name="filter" id="active" value="Active" />
        <label for="active">Active</label>
        <input type="checkbox" name="filter" id="complete" value="Complete" />
        <label for="complete">Complete</label>
        <input type="checkbox" name="filter" id="acrhived" value="Archived" />
        <label for="acrhived">Archived</label>
    </div>
    <table id="userManager">
        <tbody>
            <tr>
                <th>Game</th>
                <th>Teams</th>
                <th>Status</th>
            </tr>
            <tr>
                <td>Another Game</td>
                <td>New Team, Project Lucrum</td>
                <td class="gameStatus">Active</td>
            </tr>
            <tr>
                <td>New Game</td>
                <td>No teams selected</td>
                <td class="gameStatus">Draft</td>
            </tr>
            <tr>
                <td>New Game</td>
                <td>New Team, Just in Case</td>
                <td class="gameStatus">Active</td>
            </tr>
        </tbody>
    </table>
    <div class="test"></div>
</div>

＆＃13;

Answer 3

试试这个。：）

$(function () {
    var highlight = function(el){
        if(el.is(':checked')){
            $(".gameStatus:contains("+el.val()+")")
            .parent('tr').addClass('filtered');
        }else{
            $(".gameStatus:contains("+el.val()+")")
            .parent('tr').removeClass('filtered');
        }
    }

    //On Load
    highlight($('input[type="checkbox"][name=filter]:checked'));

    // On Change of Radio Buttons
    $('input').on('change', function () {
        highlight($(this));    
    });
});

jQuery - 选中复选框时的颜色表行，否则删除

3 个答案: