1

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

3 に答える 3

1

try this:

$('span').click(function(){
   $(this).closest('table').find('tbody tr').hide();
   $(this).closest('table').find('tr.' + this.className).show();
})
于 2012-06-20T00:31:20.943 に答える
1 
$('table thead span').click(function() {
   $(this)
       .closest('table')  // find parent table
       .find('tbody tr.' + this.className)  // detect row with same class name
       .show() // show that row
       .siblings('tr')  // capture other tr
       .hide(); // hide those tr
});

DEMO

于 2012-06-20T01:08:06.210 に答える
0

このようなもの ：

$('.toggle thead tr').click(function(){
    var c = $(this).find('span').attr('class');
        p = $(this).parent().parent();
    p.find('tbody tr').hide();
    p.find('tbody .' + c).show();
});

<table id="tab1" class="toggle">
...
</table>

デモ：ここ

于 2012-06-20T00:44:02.980 に答える