jquery - 单击 thead 时隐藏表的 tbody

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