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

Question

There is an HTML table which contains two column(Source and Type). To filter the data, there are two radio buttons. I am able to filter the data for each radio button but I am struggling to combine the two radio button filter functions.

HTML Code

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

Script

$('#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();
        }
    });

});

Expected Behavior User will select both radio button values(if not selected then default values will be considered) and then HTML table should be filtered considered both the selected valued.If user changes value of one radio button, the HTML table should be filtered accordingly. In my code, each filter logic works fine but I am not able to combine both the logics ie If am applying the filter for second radio button then it should take data which is filtered by first radio button and apply show/hide on top of that but when i do it considers whole data.

Current logic is Fiddle

Also, When users selects all from any radio buttons then it means all data should be considered wrt to that radio button. If both All are selected then whole HTML table data.

Answer 1

There are a couple problems here. First, you only want to hide the non heading rows, so you can add a <thead> and <tbody> tag to let you be more specific. Second, you should be testing whether the value is "A" as well, so that when you select "All" the rows will still be displayed. And third, when you do the secondary matching on the Type you should change the selector to only grab the currently visible tables rows.

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

Here is a fiddle

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

Use jQuery's show and hide function.
1. Add classes to the row elm representing the data it contains.
2. Change the value of your radio buttons to selectors you want to filter out.: (.c .e .i & .n)
3. Use the values of your radio buttons to hide the unwanted rows.

$('#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/

This will ensure the bonding of the row cells. I believe this is what you want.

Edit:

@Charles & @user2223335:

No need to add additional markups or classes only changing the else clause to something like:

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

will ensure the header (tcat) not to hide.

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