3

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

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

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

任何人都可以对如何实现这一点有所了解吗？

4

2 回答 2

4

可能是这样的吗？

http://jsfiddle.net/HegPJ/2/

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');
});
于 2013-05-17T08:56:43.800 回答
1

这应该可以正常工作：

<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/

于 2013-05-17T09:03:01.767 回答