Use multiple radio buttons to filter table data

Question

I have some data in a table:

<table>
<tr>
 <th>Month</th>
 <th>Savings</th>
 <th>Rate</th>
</tr>
<tr>
 <td>January</td>
 <td>$100</td>
 <td>5%</td>
</tr>
<tr>
 <td>March</td>
 <td>$200</td>
 <td>4%</td>
</tr>
</table>

I want to use radio buttons with the following logic:

All - January - March
All - $100 - $200
All - >4% - >5%

How could I use JavaScript to search the table data, and show rows based on the outputs of multiple radio buttons and not just one?

Can you please explain a little more what you want to accomplish? — lolol, Sep 23 '15 at 15:38
I wanted to keep it as simple as possible. All I want to do is have several radio buttons. The selections of these radio buttons would filter out rows of data that didn't fit the logic for those buttons. So a range, or a string of text for example. How do you 'search' the table data for the rows that contain the right content, and filter them based on the radio buttons selected? — J. Ayo, Sep 23 '15 at 15:46
Ok, now I think I understood. You want radioboxes to filter you table. right? — lolol, Sep 23 '15 at 15:50
not the data being filtered, but I will have a column that shows .js calculation outputs? — J. Ayo, Sep 23 '15 at 15:55

Joseph Tinoco · Accepted Answer · 2015-09-23T16:20:13.847

EDIT: Did an oopsie where i filtered what was supposed to be shown. Code is updated below.

I did a test page with one set of radio buttons, but the same logic will work for a new set of radio buttons whose "name" attribute is the filter you want to apply.

See the code below in action here: http://jsfiddle.net/3mdc7ppb/2/

<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
<table id="TblRates">
<tr class="headerRow">
 <th>Month</th>
 <th>Savings</th>
 <th>Rate</th>
</tr>
<tr class="dataRow">
 <td>January</td>
 <td>$100</td>
 <td>5%</td>
</tr>
<tr class="dataRow">
 <td>March</td>
 <td>$200</td>
 <td>4%</td>
</tr>
</table>
<input type="radio" name="Month"  value="All" checked="checked" />All<br/>
<input type="radio" name="Month"  value="January"/>January<br/>
<input type="radio" name="Month"  value="March"/>March<br/>

<script>
$("input[type=radio]").change(function(){
    var filter = this.value;
    if (filter == "All")
        $("tr.dataRow").css( "visibility", "visible" );
    else $("tr.dataRow").css( "visibility", "collapse" );
    var matchFound = false;
    $("tr.dataRow").find("td").each(function() {
      $this = $(this);
      if (!matchFound){
          if ($this.html() == filter){
            matchFound = true;
            $this.parent().css( "visibility", "visible" );
          }
      }
    });
});
</script>
</body></html>

score 0 · Answer 2 · edited May 23 '17 at 11:48

0

I hope to have understand right, but is similar to this question:

radio-button-filter-using-jquery-javascript

I try to show a scratch in a fiddler similar to your needs: jsfiddler

$('tr').each(function() {
        ...
});

You have to implement the range controls.

The answer of IlGala with html5 is better

Usually is much easier if you use a framework or a library to handle this with bindings (like angularjs or knockoutjs). Give it a try!

Regards

Edit: to answer to your comment

You have to work in the conditions, try to split in simpler check. Really, bindings will help you. :)

if (price > val2 && price < val3 || ...){
    $(this).show();
} else {
    $(this).hide();
}

edited May 23 '17 at 11:48

Community

1
1

answered Sep 23 '15 at 15:55

Lattanzio

83
7

can you show me how I would have radio options that were say: up to 60, up to 70, up to 90. And then hide rows based on numerical cell contents in a certain column? – J. Ayo Sep 23 '15 at 15:59
give a look to [this](http://ryanrahlf.com/filtering-table-data-with-knockout-js/) and its relative [fiddler](http://jsfiddle.net/rrahlf/EZUEF/6/). Looks harder but it isn't so much, and you will recover the time later when your project get bigger. – Lattanzio Sep 23 '15 at 16:12

score 0 · Answer 3 · edited May 23 '17 at 12:06

I would use a mix of HTML5 data tags and jquery.

The radio buttons should have a data-first-value and data-second-value in order to recover the range. the worst part is to check the rows since there is some "complex" text and not simply the value you're looking for. But there are a lot of examples to achive your goal.

here is an example of how your code can look like.

$(document).ready(function() {
    $(".radio").click(function() {        
        // hide all table rows

        // Get the rest of checked radios
        var checkedRadios = $('.radio:checked');

        // Iterate the checked radios
        $.each(checkedRadios, function(idx, element){
            // Table rows filter:
            // 1) iterate the rows
            // 2) if the table respects the filter => show
        });
    });
});

This is one of the simplest way to hide/show the results you need.

Use multiple radio buttons to filter table data

3 Answers3

The answer of IlGala with html5 is better