jquery - 单击标题时隐藏表格的正文

Question

我有一个如下表结构。

    <table>
      <thead>
        <tr></tr>
        <tr></tr>
      </thead>
      <tfoot>
        <tr></tr>
        <tr></tr>
      </tfoot>
      <tbody>
        <tr></tr>
        <tr></tr>
     </tbody>
   </table>

单击第一行时，我想切换显示/隐藏 tbody 和 tfoot。我尝试了很多东西但失败了，因为可能有多个这样的表。我正在使用 jquery。提前致谢。

Answer 1

这是我的工作：

$(document).on('click','thead',function(){
       $(this).closest('table').find('tbody').toggle();
       $(this).closest('table').find('tfoot').toggle();
    });

这是小提琴

Answer 2

尝试

$('thead').click(function(){
   $(this).siblings().toggle(); //$(this).siblings('tbody, tfoot').toggle();
})

演示：小提琴

Answer 3

$('thead tr:first-child').on('click',function(){
   $(this).closest('table').find('tbody, tfoot').toggle();
});

Answer 4

您在广告的第一行说，所以：

 $('thead tr').on("click",function(){
   $(this).closest('table').find('tbody').hide();
   $(this).closest('table').find('tfoot').hide();
});

Answer 5

我认为你需要：

$('thead').click(function(){
   $(this).closest('table').find('tbody, tfoot').toggle();
});

检查：http: //jsfiddle.net/E6vPb/1/

Answer 6

找到所有的thead，将它们绑定到单击事件处理程序上，该处理程序找到您单击的表，并切换（显示/隐藏）该表的tbody 和tfoot。

$('thead').click(function(){
    var table = $(this).closest('table');
    table.children('tbody').toggle();
    table.children('tfoot').toggle();
});

http://jsfiddle.net/mattydsw/9Tbv6/

编辑

如果您只希望广告中的第一行“可点击”，请将第一行代码中的选择器更改为：

$('thead').children('tr:first-child').click( ...

http://jsfiddle.net/mattydsw/9Tbv6/2/