Question

有一个HTML表，其中包含两列（Source和Type）。要过滤数据，有两个单选按钮。我能够过滤每个单选按钮的数据，但我正在努力结合两个单选按钮过滤功能。

HTML代码

<form action="" id="Details">
<fieldset>
<label><input type="radio" name="Option1" value="Critical" >Critical</label>
<label><input type="radio" name="Option1" value="Non Critical" >Non Critical</label>
<label><input type="radio" name="Option1" value="A" checked="checked" >All</label>
    <br>
    <br>
<label><input type="radio" name="Option2" value="Internal" >Internal</label>
<label><input type="radio" name="Option2" value="External" >External</label>
<label><input type="radio" name="Option2" value="A" checked="checked" >All</label>
</fieldset>
</form>
<br>
    <br>
<div>
        <table id="DataTable"  border="1">
        <tr>
        <th>Source</th>
        <th>Type</th>
        </tr>            
        <tr>
        <td class="Source">Internal</td>
        <td  class="Type">Critical</td>
        </tr>
        <tr>
        <td  class="Source">Internal</td>
        <td class="Type">Non Critical</td>
        </tr>
        <tr>
        <td class="Source">External</td>
        <td class="Type">Critical</td>
        </tr>
        <tr>
        <td class="Source">External</td>
        <td class="Type">Non Critical</td>
        </tr>       
        </table>
</div>
 <button id='btnFilter'>Go</button>

脚本

$('#btnFilter').click(function() {

    var val1 = $('[name=Option1]:checked').val();
    var val2 = $('[name=Option2]:checked').val();


    $('tr').hide();

    $('tr td.Source').each(function() {

        if ($(this).text() == val2 )
        {

            $(this).parent().show();
        }
    });
    alert("ok");
    $('tr').hide();
        $('tr td.Type').each(function() {

        if ($(this).text() == val1 )
        {

            $(this).parent().show();
        }
    });

});

预期行为用户将选择两个单选按钮值（如果未选中则将考虑默认值），然后将HTML表格视为已选择的值进行过滤。如果用户更改了一个单选按钮的值，则应相应地过滤HTML表格。在我的代码中，每个过滤器逻辑工作正常，但我无法结合两个逻辑，即如果我应用第二个单选按钮的过滤器，那么它应该采取由第一个单选按钮过滤的数据并应用显示/隐藏在其上但是当我这样做时，它会考虑整个数据。

当前逻辑是 Fiddle

此外，当用户从任何单选按钮中选择全部时，则表示应该将所有数据视为该单选按钮。如果同时选择了All，那么整个HTML表数据。

Answer 1

这里有几个问题。首先，您只想隐藏非标题行，因此您可以添加<thead>和<tbody>标记，以便更具体。其次，您应该测试值是否也是“A”，这样当您选择“全部”时，仍会显示行。第三，当您在Type上进行二次匹配时，您应该将选择器更改为仅抓取当前可见的表行。

jsfiddle

$('#btnFilter').click(function() {
    var val1 = $('input[name=Option1]:checked').val();
    var val2 = $('input[name=Option2]:checked').val();

    $('tbody tr').hide();

    $('tbody td.Source').each(function() {
        var value = $(this).text();

        if (value == val2 || val2 == "A") {
            $(this).parent().show();
        }
    });

    $('tbody tr:visible td.Type').each(function() {
        var value = $(this).text();

        if (value == val1 || val1 == "A") {
            $(this).parent().show();
        } else {
            $(this).parent().hide();
        }
    });

});

Answer 2

这是一个小提琴

http://jsfiddle.net/afrievalt/zmGNU/

使用jQuery的show和hide功能。
1.将类添加到表示其包含的数据的行榆树中 2.将单选按钮的值更改为要过滤的选择器:(。c .e .i＆amp; .n）
3.使用单选按钮的值隐藏不需要的行。

$('#btnFilter').click(function() {
   var val1 = $('[name=Option1]:checked').val();
   var val2 = $('[name=Option2]:checked').val();
   $("tr").show();
   $(val1).hide();
   $(val2).hide();
});

Answer 3

$('#btnFilter').click(function() {

    var val1 = $('[name=Option1]:checked').val();
    var val2 = $('[name=Option2]:checked').val();
    $('tr').each(function() {
        var src = $(this).find('.Source').text();
        var typ = $(this).find('.Type').text();

        if ((typ == val1 || val1 == 'A' ) && (src == val2 || val2 == 'A' )) {
            $(this).show();
        } else {
            $(this).hide();
        }
    });
});

http://jsfiddle.net/effone/ZxUUA/4/

这将确保行单元的绑定。我相信这就是你想要的。

编辑：

@Charles＆amp; @ user2223335：

无需添加额外的标记或类，只需将else子句更改为：

    else if (typ !='' && src != '')

将确保标题（tcat）不被隐藏。

http://jsfiddle.net/effone/ZxUUA/5/

单选按钮过滤器使用jquery / javascript

3 个答案: