javascript - TR 折叠时 <TR> 标签中的 jQuery next 不起作用

Question

我有一个包含很多行的表，但每一行都需要一个帮助行，因此它们成对出现。

例如

<tbody>
<tr>
   <td>Info 1</td>
   <td>Info 2</td>
   <td>Info 3</td>
   <td>Info 4</td>
   <td> <a>button more</a> </td>
</tr>
<!-- AND -->
<tr class="bottom-row">
   <td colspan="2">Info 5</td>
   <td colspan="2">Info 6</td>
   <td>Info 7</td>
</tr>
<tr>
   <td>OtherInfo 1</td>
   <td>OtherInfo 2</td>
   <td>OtherInfo 3</td>
   <td>OtherInfo 4</td>
   <td> <a>button more</a> </td>
</tr>
<!-- AND -->
<tr class="bottom-row">
   <td colspan="2">OtherInfo 5</td>
   <td colspan="2">OtherInfo 6</td>
   <td>OtherInfo 7</td>
</tr>

我想点击最下面一行显示，再次点击隐藏

我尝试使用 jQuery UI 的切换

    $(".btnMore").click(function(){
      $(this).parent("td").parent("tr").next().toggle();        
  });

当底部行可见时，此功能完美，当我添加 style="display:none" 时，此功能将停止工作。还尝试删除 style="display:none" 并添加加载页面 $(".bottom-row").hide(); 但也不起作用

我能做什么？

Answer 1

试试这个:

$('table').on("click", ".btnMore", function() {
    $(this).closest('tr').next().toggle();
});

http://jsfiddle.net/PnUns/