jQuery在<TR>TR折叠时标签不起作用

jQuery next in <TR> tag not working when TR collapse

本文关键字：TR 标签 不起作用 折叠 gt jQuery lt      更新时间：2023-09-26

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

例如

<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();，但都不起作用

我能做什么？

试试这个：

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

http://jsfiddle.net/PnUns/

当我尝试它时，它似乎工作得很好，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();
相关文章：