3

各テーブルに約100行の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 に答える