Question

I have 2(or more) tables with different ids and class names within each tables are same. Depending on which span is clicked I want to show or hide rows within tbody. for eg: if the span class=”quarter” is clicked, I want to show the row with class=”quarter” within tbody and hide the class=”month”. Should I use jQuery event listeners to achieve this? I want this code to be resuable to many other tables with id=tab3 or tab4 and possibly many more. So I do not want to use $(“#tab1”).onclick…I want to be able to detect which span within which table was clicked and then show the tbody elements within it.

<table id="tab1">
<thead><tr><th><span class="quarter">Quarter</span></th></tr>
<tr><th><span class="month">Month</span></th></tr>
</thead>
<tbody>
<tr class="quarter"><td></td></tr>
<tr class="month"><td></td></tr>
</tbody>
</table>

<table id="tab2">
<thead><tr><th><span class="quarter">Quarter</span></th></tr>
<tr><th><span class="month">Month</span></th></tr>

Final Solution(my actual html structure is little different from the example above)

$('table thead span label').click(function() {  
                        $("label:not(this.className)").css('color','#d6c9b9');      
                        $(this).css('color','#00425f');         
                        $(this).parents('table').parents('table').find('table').hide();                     
                        $(this).closest('table').find('tbody tr').hide();
                        $(this).closest('table').show();                        
                        $(this).closest('table').find('tbody tr.' + this.className).show();
                        $(this).parents('table').parents('table').find('table.'+ this.className).show();
            });

Answer 1

try this:

$('span').click(function(){
   $(this).closest('table').find('tbody tr').hide();
   $(this).closest('table').find('tr.' + this.className).show();
})