1

我有 2 个（或更多）表，每个表中的 id 和类名都相同。根据单击的跨度，我想在 tbody 中显示或隐藏行。例如：如果单击跨度类 =“季度”，我想在 tbody 中显示带有类 =“季度”的行并隐藏类 =“月”。我应该使用 jQuery 事件侦听器来实现这一点吗？我希望此代码可用于 id=tab3 或 tab4 以及可能更多的许多其他表。所以我不想使用 $("#tab1").onclick...我希望能够检测单击哪个表中的哪个跨度，然后显示其中的 tbody 元素。

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

最终解决方案（我的实际 html 结构与上面的示例略有不同）

$('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

尝试这个：

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

演示

于 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 回答