Question

我有一个使用PHP从数据库中获取数据的表。

该表包含父2个元素，假设它们是：

Name    Surname    << table row id = info1

Name    Surname    << table row id = info2

在每一行的下方，还有另一行默认隐藏。单击名字时，这就是我希望它显示的方式：

Name    Surname    << table row id = info1
DOB     City       << table row id = infoSub1

Name    Surname    << table row id = info2
                   << table row id = infoSub2 NOT DISPLAYED

如何以最有效的方式实现这一目标？

由于

Answer 1

$("#info1").click(function() {
    $(this).children("#infoSub1").slideDown();
});

然后对info2和infoSub2执行相同操作：）

Answer 2

如果您可以为父行提供一个类（例如parent），那么您可以使用.nextUntil()使其非常通用：

$("tr.parent").click(function() {
  $(this).nextUntil(".parent").toggle();
});

这只是在点击的行之后选择不 <tr>的所有.parent元素，直到找到它为止。这允许您介于其间的任意数量的非父行，并且它将正确地切换它们。如果您有一个包含大量行的长表，请以类似的方式使用.delegate()：

$("#tableID").delegate("tr.parent", "click", function() {
  $(this).nextUntil(".parent").toggle();
});

此行为相同，但会将一个事件处理程序附加到<table>（而不是每个父<tr>一个）。

使用Jquery将div与同一计数器链接

2 个答案: