显示/隐藏表格内的所有 tr-s答案

【问题标题】：Show/Hide all tr-s inside table显示/隐藏表格内的所有 tr-s
【发布时间】：2012-09-19 13:48:13
【问题描述】：

这是html结构

<table class="views-table cols-3">
      <caption>
         <h2>LINK(which will hide/show all trs in this table)</h2>
      </caption>
   <thead>
   <tbody>
   ...
   </tbody>
</table>

此表以相同的类重复 n 次。请帮助隐藏/显示所有 tr-s 或整个 <tbody> 在单击链接的表中的 js 或 jquery 脚本。

【问题讨论】：

标签： javascript jquery html-table drupal-7

【解决方案1】：

 $('.views-table h2').click(function() {
      $(this).closest('table').find('tbody').toggle();
 });

【讨论】：

我真的很抱歉，但似乎我的 cms 不允许我使用 jq 脚本。请你写一个js等效函数。我将此代码粘贴到：视图>标题>全局：文本区域但由于某种原因它不加载jq。但它会加载 js（我用 alert() 测试过）。
我不知道 'cms' 是什么，'Views>Header>Global: Text area' 在哪里，并且很少在没有 jQuery 的情况下操作 DOM，所以你可能需要找其他人（或者弄清楚为什么 jq 没有加载）...

【解决方案2】：

$(".views-table h2").click(function(){
       var table = $(this).parents("table");
       var tbody = table.children("tbody");
       if(tbody.is(':visible')){
               tbody.hide();
       }else{
           tbody.show();
       }

});

试试这个链接http://jsfiddle.net/wFcpP/8/

【讨论】：

真的很抱歉，请看我在shaun5的评论

【解决方案3】：

在 jQuery 中：

(jQuery.noConflict())(function($){
    $('.views-table cols-3 h2').click(function(){
        if($(this).parent('.views-table').find('TBODY > TR')[0].is(':visible')) {
            $(this).parent('.views-table').find('TBODY > TR').hide();
        } else {
            $(this).parent('.views-table').find('TBODY > TR').show();
        }
    });
});

【讨论】：

这里不考虑同一个类的表重复n次。