Neil Burton
Neil Burton

Reputation: 13

Table filtering in jquery - a more elegant solution please

I want to filter certain rows out of a table and am using classes to categorize the rows.

The below code enables me to show and hide row data categorized as "QUO" and "CAL" (eventually there will be other categories.

Can someone point me towards a more elegant solution, so I don't have to duplicate code for each category as I have below?

Thanks!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<html>
<head>
    <title>Untitled</title>
    <style>

    </style>
    <script src="Javascript/jquery-1.4.2.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(document).ready(function () {
    $("#toggle_ac_cal").click(function()                
    {
        var checked_status = this.checked;
        if (checked_status==true)
        {
        $(".ac_cal").show()
        }
        else
        {
        $(".ac_cal").hide()
        }
    });     
    $("#toggle_ac_quo").click(function()                
    {
        var checked_status = this.checked;
        if (checked_status==true)
        {
        $(".ac_quo").show()
        }
        else
        {
        $(".ac_quo").hide()
        }
    });         
    });
    </script>
</head>
<body>
<input type="checkbox" id="toggle_ac_cal" checked="checked" />CAL<br/>
<input type="checkbox" id="toggle_ac_quo" checked="checked" />QUO<br/>
<table>
<tbody>
<tr class="ac_cal">
<td>CAL</td>
<td>10 Oct</td>
<td>John Barnes</td>
</tr>
<tr class="ac_cal">
<td>CAL</td>
<td>10 Oct</td>
<td>Neil Burton</td>
</tr>
<tr class="ac_quo">
<td>QUO</td>
<td>11 Oct</td>
<td>Neil Armstrong</td>
</tr>
</tbody>
</table>
</body>
</html>

Upvotes: 0

Views: 131

Answers (3)

Pointy
Pointy

Reputation: 413737

You could give your clickable elements (buttons? whatever they are) two classes: "toggler" and then something like "target:ac_cal" or "target:ac_quo". Then, you can assign the same handler to all of them:

$('.toggler').click(function() {
  var target = this.className.replace(/target:(\w*)/, "$1");
  $('.' + target)[this.checked ? "show" : "hide"]();
});

What that does is pluck the class name of the intended target of the "toggler" button out of the toggler's own class string. Then it calls either "show" or "hide" on the affected targets.

edit — oh durr, I scrolled down to find your checkboxes :-) So those would look like this:

<input type="checkbox" id="toggle_ac_cal" checked="checked" class='toggler target:ac_cal'/>CAL<br/>
<input type="checkbox" id="toggle_ac_quo" checked="checked" class='toggler target:ac_quo'/>QUO<br/>

Upvotes: 1

Mottie
Mottie

Reputation: 86413

Try this (demo):

HTML (the id should match the classes in the table):

<input type="checkbox" id="ac_cal" checked="checked" />CAL<br/>
<input type="checkbox" id="ac_quo" checked="checked" />QUO<br/>

Script:

$(document).ready(function () {
    $("input[id^=ac]").click(function()                
    {
        $('tr.' + this.id)[this.checked ? "show" : "hide"]();
    })       
});

Upvotes: 0

Nick Craver
Nick Craver

Reputation: 630429

You can reduce your code (without changing markup) down to this:

$("[id^='toggle_'").click(function() {
  $("." + this.id.replace('toggle_','')).toggle(this.checked);
});

Though, if you gave your toggle elements a class instead, like .toggle you can clean up the original selector, like this:

$(".toggle").click(function() {
  $("." + this.id.replace('toggle_','')).toggle(this.checked);
});

You could also give them a class and use the value as the target class, like this:

<input type="checkbox" class="toggle" value="ac_cal" />

Then your jQuery is just this, short and simple:

$(".toggle").click(function() {
  $("." + this.value).toggle(this.checked);
});

Upvotes: 1

Related Questions