Question

我有一个包含员工姓名的表。我想在包含该特定员工的联系信息的每一行之后添加一个隐藏行。我想使用JQuery来做一个显示该信息的slideDown动画。如果我使用的是Javascript，我会做一些事情，例如将TR元素命名为ID，例如＆＃34; employee-xx＆＃34;隐藏线为＆＃34; hidden-xx＆＃34;其中xx是employeeid。我会做一个调用函数的onClick事件（使用employeeid作为参数）来隐藏或取消隐藏该行。因为我刚刚开始使用JQuery，所以我不知道如何优雅地编写代码。我想告诉它＆＃34;当您点击表格中的可见线条时，请向下滑动它下面的隐形线＆＃34;，但不知道该怎么做。如果我使用行的ID，我如何通过JQuery访问ID？我知道这可能很简单，但我被困住了。

谢谢你，约翰

Answer 1

http://www.w3schools.com/jquery/jquery_traversing_siblings.asp

var clickhandler = function(e) {
  $(e.target).next().show();
}

顺便说一下，之前已经回答了这个问题。

Retrieve previous and next rows in a table using jQuery

Answer 2

编辑：修正了一个缺少类名的derpy错误。 Fiddle已更新。

我认为这就是你想要的？单击带有名称的行会导致下面隐藏的行向下滑动。再次单击可收回。

HTML：

<table>
    <tr class="show">
        <td>Bob Robertson</td>
    </tr>
    <tr class="hide">
        <td>
            <div>(555)123-4567</div>
        </td>
    </tr>
    <tr class="show">
        <td>Richard Johnson</td>
    </tr>
    <tr class="hide">
        <td>
            <div>(000)000-0000</div>
        </td>
    </tr>
</table>

JS：

$('.hide').toggle().find('div').slideToggle();

$('.show').on('click', function () {
    var next = $(this).next();
    if (next.css('display') == 'none') {
        next.toggle();
        next.find('div').slideToggle();
    } else {
        next.find('div').slideToggle(function () {
            next.toggle();
        });
    }
});

这里是fiddle。

使用JQuery取消隐藏表行

2 个答案: