使用按钮单击 jquery 显示隐藏多行答案

【问题标题】：show hide multiple rows using button click jquery使用按钮单击 jquery 显示隐藏多行
【发布时间】：2012-06-16 19:45:59
【问题描述】：

我有一个这样的html表格

    <html>
    <head>
    </head>
    <body>
<div>
    <div>
    <table>
    <tr></tr> --visible row 1
    <tr></tr> --show\hide on click by visible row1
    <tr></tr> --show\hide on click by visible row1
    </table>
    </div>
    <div>
    <table>
    <tr></tr> --visible row 2
    <tr></tr> --show\hide on click by visible row2
    <tr></tr> --show\hide on click by visible row2
    <tr></tr> --show\hide on click by visible row2
    </table>
    </div>
    <div>
    <table>
    <tr></tr> --visible row 3
    <tr></tr> --show\hide on click by visible row3
    </table>
    </div>
<div>
    </body>
    </html>

如何通过单击相应的可见行来执行 tr 的显示\隐藏。我已经看到删除下一行的示例，但是我如何在可见行的父表中显示隐藏 tr 并隐藏所有不在第一个位置的子行。

如果有人可以发布 jquery 函数，我可以解决这个问题。非常感谢。

【问题讨论】：

为 TRs 和点击 TRs 分配一个类，然后执行 nextSibling(clickclass)

标签： html jquery-plugins jquery

【解决方案1】：

不确定页面加载状态，以下将隐藏加载时每个表的第一行以外的所有内容，并将点击处理程序应用于顶行

$('table').each(function(){
    $('tr:first', this) .click(function(){
        $(this).siblings().toggle()
    })
  $('tr:gt(0)', this).hide()
})

演示：http://jsfiddle.net/Rd8PU/

【讨论】：

非常感谢 charlietfl 你让我开心。我在您的 jsfiddle\idea 之上工作并创建了我需要的东西。你是最棒的。我最后的小提琴jsfiddle.net/Lazyboy4ever/T7Vtn/1 还有一种方法可以在每次点击时用不同的内容切换标签。
还有一种方法可以在每次点击时用不同的内容切换标记。正如你在最终的 jsfiddle 中看到的那样
试试这个jsfiddle.net/T7Vtn/3 你应该添加一些类到表或包装器 div 以仅引用这些表，以防页面中有其他表或脚本可能最终出现的其他页面。仅将标签用作选择器很危险
如果您点击两次显示隐藏然后尝试单击各个行，则单击的行不会展开。是不是因为最后的 hiderows 方法。

【解决方案2】：

为可见行分配一个类 (class="clickable")

那么这是你的功能

$('tr.clickable').click(function() {
    $(this).siblings().toggle();
});

希望对你有帮助

【讨论】：

感谢 chris 的帮助，你的也可以，但 charlie 适合我的要求。非常感谢，你很棒。
我做更改的时候已经很晚了。这个版本应该会更好。除了jsfiddle.net/T7Vtn/8 所涵盖的简单案例之外，整个事情还需要扩展到各种场景