Home/ Questions/Q 7868541
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-03T01:02:13+00:00

I would like to make my table filter more elegant. Basically, this table will

  • 0

I would like to make my table filter more elegant. Basically, this table will have links at the bottom to hide and show rows based on attributes in the table. It’s working the way I want, but I feel like I could have written using a lot fewer lines of jQuery… Anyone have any ideas?

Here’s the jsfiddle: http://jsfiddle.net/vC88q/1/

And the code:

<!--*******************************************************
jquery that needs cleaned up appears at the end of this file!
Code is online at JSFIDDLE: http://jsfiddle.net/vC88q/1/
*********************************************************-->
<!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">
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
</head>

<body>
    <table> 
        <thead> 
            <tr> 
                <th>Color Table</th>
            </tr> 
        </thead> 
        <tbody> 
            <tr> 
                <td data-color="red">red</td>
            </tr> 
            <tr> 
                <td data-color="white">white</td>
            </tr> 
            <tr> 
                <td data-color="blue">blue</td>
            </tr> 
            <tr> 
                <td data-color="bluewhite">bluewhite</td>
            </tr> 
            <tr> 
                <td data-color="red">red</td>
            </tr>
            <tr> 
                <td data-color="red">red</td>
            </tr> 
            <tr> 
                <td data-color="red">red</td>
            </tr> 
            <tr> 
                <td data-color="blue">blue</td>
            </tr> 
            <tr> 
                <td data-color="blue">blue</td>
            </tr> 
        </tbody> 
    </table> 
    <br />
    <br />
    <div class="filtertable">
        <a href="#" data-color="all">All</a>
        <a href="#" data-color="red">Red</a>
        <a href="#" data-color="white">White</a>
        <a href="#" data-color="blue">Blue</a>
        <a href="#" data-color="bluewhite">Blue and White</a>
    </div>

<script type="text/javascript">

/*******************************************************
Here is the jquery I need help with, how can I reduce the code
I've written? Code is online at JSFIDDLE: http://jsfiddle.net/vC88q/1/
*********************************************************/

$(document).ready(function() 
    { 
    /*****************************************************************
    when users clicks the "all" filter, show all the hidden table rows
    *****************************************************************/
    $('.filtertable a[data-color=all]').click(function() {
        $('td[data-color]').parent().show();
    });
    /****************************************************************
    when users clicks the "red" filter, hide all but red table rows
    *****************************************************************/
    $('.filtertable a[data-color=red]').click(function() {
        $('td[data-color=red]').parent().show();
        $('td[data-color=white]').parent().hide();
        $('td[data-color=blue]').parent().hide();
        $('td[data-color=bluewhite]').parent().hide();
    });
    /*****************************************************************
    when users clicks the "white" filter, hide all but white table rows
    ****************************************************************/
    $('.filtertable a[data-color=white]').click(function() {
        $('td[data-color=white]').parent().show();
        $('td[data-color=red]').parent().hide();
        $('td[data-color=blue]').parent().hide();
        $('td[data-color=bluewhite]').parent().hide();
    });
    /****************************************************************
    when users clicks the "blue" filter, hide all but blue table rows
    *****************************************************************/
    $('.filtertable a[data-color=blue]').click(function() {
        $('td[data-color=blue]').parent().show();
        $('td[data-color=white]').parent().hide();
        $('td[data-color=red]').parent().hide();
        $('td[data-color=bluewhite]').parent().hide();
    });
    /*****************************************************************
    when users clicks the "blue and white" filter, hide all but blue+white table rows
    *****************************************************************/
    $('.filtertable a[data-color=bluewhite]').click(function() {
        $('td[data-color=bluewhite]').parent().show();
        $('td[data-color=white]').parent().hide();
        $('td[data-color=blue]').parent().hide();
        $('td[data-color=red]').parent().hide();
    });
} 
); 
</script>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team
    $(document).ready(function()
    {
        $('.filtertable a[data-color]').click(function() {
            var color = $(this).data().color;
            if(color == 'all'){
                 $('td[data-color]').parent().show();
            } else {
                $('td[data-color='+ color +']').parent().show();
                $('td[data-color!='+color+']').parent().hide();
            }
        });
    }
);
    • 0