CODEWITHSUNDEEP
javascripthtmlradio-button
J. Ayo
J. Ayo

Reputation: 560

Use multiple radio buttons to filter table data

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:

  1. All - January - March

  2. All - $100 - $200

  3. 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?

Upvotes: 0

Views: 5708

Answers (3)

Joseph Tinoco
Joseph Tinoco

Reputation: 2235

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>

Upvotes: 2

Lattanzio
Lattanzio

Reputation: 103

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

Upvotes: 0

IlGala
IlGala

Reputation: 3419

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.

Upvotes: 0

Related Questions