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/

Answer 2

我尝试时似乎工作正常，http://jsfiddle.net/LF7Ar/1/

// I added the hide from the beginning
$(".btnMore").click(function(){
  $(this).parent("td").parent("tr").next().toggle();        
});
$('.bottom-row').hide();

当TR崩溃时，jQuery中的下一个标签不起作用

2 个答案: