发现点击来选择一个表

Question

喜
我的表看起来像这样

<table> 
<tbody> 
    <tr> 
    <td class='center'>some text</td> 
    <td class='center'>some text</td> 
    <td class='center'>some text</td> 
    <td class='center'>some text</td> 
    <td class='action'><a href="www.yahoo.com">go to some other url</a></td> 
    </tr> 
</tbody> 
<tbody style='display:none'> 
    <tr> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td></td> 
    </tr> 
    <tr> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td></td> 
    </tr> 
</tbody> 
<tbody> 
    <tr> 
    <td class='center'>some text</td> 
    <td class='center'>some text</td> 
    <td class='center'>some text</td> 
    <td class='center'>some text</td> 
    <td class='action'><a href="www.yahoo.com">go to some other url</a></td> 
    </tr> 
</tbody> 
<tbody style='display:none'> 
    <tr> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td></td> 
    </tr> 
    <tr> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td></td> 
    </tr> 
</tbody> 

在第一视图中仅示出第一行TBODY

和第二TBODY行是隐藏的内TD。
我需要当用户点击第一个表格行时，第二个表格行将被显示/隐藏。
我设法用下面的代码

$('tbody').toggle(function(){ 
$(this).next('tbody:first').show(); //display the first next tbody   
} 
,function(){ 
$(this).next('tbody:first').hide();//hide the next tbody 
} 
); 

现在我还需要做到这一点，当用户点击这个显示/隐藏功能将不会发生的“.action”类和表的表单元格单元格链接将预制

我试过很多选择，但什么也没有工作， 我将不胜感激，如果有人能够给我一些解决这个问题
THANKS

Answer 1

一种方法是在事件处理程序产生事件的检查：

$('tbody').click(function(event){ 
    if(!$(event.target).is('td.action a')) { 
     var $next = $(this).next('tbody'); // no need for :first 
     $next.toggle(!$next.is(':visible')); 
    } 
} 

参考：toggle，is，:visible

Answer 2

您可以HANDL E中的click事件这些细胞，并呼吁e.stopPropagation防止事件冒泡到<tbody>：

$('.action').click(function(e) { e.stopPropagation(); });