Question

我有4个表，每个表中有大约一百行。每个表都有自己唯一的ID（ABC1，ABC2等），每个表行的每一行都有自己唯一的ID（ABC1-Val1，ABC1-Val2等）。每个行都有自己的复选框（具有自己的唯一名称）。

我正在寻找一个JavaScript（可能与jQuery一起工作），它可以通过单击按钮进行操作，单击该按钮时，将仅显示已选择的表的行。 [可能还包括删除过滤]。

大声思考 - 如果未选中/选中复选框，我可以使用带有隐藏元素的范围在0和1之间切换。

任何人都可以轻描淡写地说明如何实现这一目标吗？

Answer 1

可能是这样的吗？

HTML：

<table border="1" id="tableId1">
    <thead>
         <tr>
            <td>Header 1</td>
            <td>Header 2</td>
            <td>Header 3</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><input type="checkbox"/></td>
            <td>row 1, cell 1</td>
            <td>row 1, cell 2</td>
        </tr>
        <tr>
            <td><input type="checkbox"/></td>
            <td>row 2, cell 1</td>
            <td>row 2, cell 2</td>
        </tr>
    </tbody>
</table>
<hr/>
<input type="button" value="Filter" id="filterButt"/>
<input type="button" value="Reset" id="resetButt"/>

JS：

$('#filterButt').click(function(){
    $('#tableId1 tbody').find('tr:not(:has(:checkbox:checked))').hide();
});

$('#resetButt').click(function(){
    $('#tableId1').find('tr').show();
    $('#tableId1 input:checkbox').removeAttr('checked');
});

Answer 2

这应该可以正常工作：

<div>
    <button type="button" id="filterTablesbtn">Filter</button>
    <button type="button" id="clearFilterbtn">Clear Filter</button>
</div>
ABC1
<table id="ABC1">
    <tr>
        <td>Test</td><td><input type="checkbox"/></td>
    </tr>
    <tr>
        <td>Test 2</td><td><input type="checkbox" /></td>
    </tr>
</table>
ABC2
<table id="ABC2">
    <tr>
        <td>Test</td><td><input type="checkbox"/></td>
    </tr>
    <tr>
        <td>Test 2</td><td><input type="checkbox" /></td>
    </tr>
</table>
ABC3
<table id="ABC3">
    <tr>
        <td>Test</td><td><input type="checkbox"/></td>
    </tr>
    <tr>
        <td>Test 2</td><td><input type="checkbox"/></td>
    </tr>
</table>

window.onload = function()
{
    $('#filterTablesbtn').click(function(){
        filterTable('ABC1');
        filterTable('ABC2');
    });

    $('#clearFilterbtn').click(function(){
        clearFilter('ABC1');
        clearFilter('ABC2');
    });
}

function filterTable(id)
{
    $('#' + id + ' tr').each(function(){
        if($(this).find('input[type=checkbox]').is(":checked"))
            $(this).hide();
    });
}

function clearFilter(id)
{
    $('#' + id + ' tr').show();
}

请看这里的小提琴： http://jsfiddle.net/SpAm/pSzk7/

JavaScript＆amp;复选框 - 过滤

2 个答案: