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行我需要当用户点击第一个表行时，将显示/隐藏第二个表行。
我设法使用以下代码执行此操作

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

现在我还需要当用户点击带有“.action”类的表格单元格时，这个显示/隐藏功能不会发生，表格单元格链接将被执行

我尝试了很多选项，但没有任何工作，如果有人能帮我解决这个问题，我将不胜感激谢谢

Answer 1

您可以处理这些单元格的click事件，并致电e.stopPropagation以阻止该事件冒泡到<tbody>：

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

Answer 2

一种方法是检查事件源自的事件处理程序：

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

在表格中查找所选单击的td

2 个答案: