javascript - 标签中的 jQuery next 在 TR 崩溃时不起作用

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/