Home/ Questions/Q 855279
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-15T08:03:08+00:00

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

  • 0

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

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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);
});
    • 0