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

【问题标题】：Radio Button filter using jquery/javascript使用 jquery/javascript 的单选按钮过滤器
【发布时间】：2014-03-23 17:50:39
【问题描述】：

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

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

此外，当用户从任何单选按钮中选择全部时，这意味着所有数据都应被视为该单选按钮。如果两者都被选中，则整个 HTML 表格数据。

【问题讨论】：

标签： javascript jquery filter

【解决方案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();
        }
    });

});

【讨论】：

【解决方案2】：

$('#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 和@user2223335：

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

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

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

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

【讨论】：

【解决方案3】：

这是一个小提琴

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

使用 jQuery 的显示和隐藏功能。
1. 向表示其包含的数据的行 elm 添加类。
2. 将单选按钮的值更改为要过滤掉的选择器。：(.c .e .i & .n)
3. 使用单选按钮的值隐藏不需要的行。

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

【讨论】：