使用JQuery取消隐藏表行

Use JQuery to Unhide Table Rows

本文关键字：隐藏 取消 JQuery 使用      更新时间：2023-09-26

我有一个包含员工名称的表。我想在每一行后面添加一个隐藏行，其中包含该特定员工的联系信息。我想使用JQuery来制作一个幻灯片放映动画，展示这些信息。如果我使用Javascript，我会做一些事情，比如用ID（如"employee xx"）命名TR元素，并将隐藏行命名为"hidden xx"，其中xx是employeeid。我会做一个onClick事件，调用一个函数（使用employeeid作为参数）来隐藏或取消隐藏行。由于我刚刚开始JQuery，我不知道如何优雅地编写代码。我想告诉它"当你点击表格中的一条可见线时，滑动它下面的不可见线"，但不知道如何做到这一点。如果我使用行的ID，如何通过JQuery访问该ID？我知道这可能很简单，但我被卡住了。

谢谢，John

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

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

顺便说一句，这个问题以前在这里已经回答过了。

使用jQuery 检索表中的前一行和下一行

EDIT：修复了一个缺少类名的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();
        });
    }
});

这是一把小提琴。

相关文章：