Question

我有一个表结构，如下所示。

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

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

Answer 1

这是我的工作：

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

继承人Fiddle

Answer 2

尝试

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

演示：Fiddle

Answer 3

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

Answer 4

我认为你需要：

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

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

Answer 5

你在thead的第一行说，所以：

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

Answer 6

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

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

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

修改

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

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

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

单击thead时隐藏表格的tbody

6 个答案: