Question

我有一个像这样的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的show \ hide。我已经看到了删除下一行的示例，但是如何在可见行的父表中显示hide tr并隐藏不在第一位的所有子行。

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

Answer 1

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

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

DEMO：http://jsfiddle.net/Rd8PU/

Answer 2

将类分配给可见行（class =“clickable”）

然后这是你的功能

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

希望这有帮助

show使用按钮单击jquery隐藏多行

2 个答案: