1

我有一个像这样的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 函数，我可以解决这个问题。非常感谢。

4

2 回答 2

3

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

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

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

于 2012-06-16T20:14:21.183 回答
1

为可见行分配一个类（class="clickable"）

那么这是你的功能

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

希望这可以帮助

于 2012-06-16T20:02:36.180 回答