Question

我有两个（或更多）表，每个表中的ID和类名不同。根据单击的跨度，我想在tbody中显示或隐藏行。例如：如果单击span class =“quarter”，我想在tbody中显示class =“quarter”的行并隐藏class =“month”。我应该使用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();
            });

Answer 1

试试这个：

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

Answer 2

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

Answer 3

这样的事情：

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

DEMO：here

jquery事件监听器动态检测点击？

3 个答案: