javascript - 单击另一个 tr 时，使用 javascript/jQuery 显示下一个 tr

Question

我正在创建一个管理页面，显示待批准的用户注册列表。我有一个表，其中列出了每个用户的用户名和批准/拒绝复选框(我可能会将其更改为单选按钮)。每个列出的隐藏用户下方都有一个表格行，其中显示了他们的详细信息(全名、注册日期等)。

我想要的是点击带有用户名的tr，并在其下方显示隐藏的tr以显示所有详细信息，然后当您点击不再隐藏的tr时，它再次隐藏。

它实际上做的是当我点击一个带有用户名的 tr 时显示所有隐藏的 tr，然后如果我点击一个以前隐藏的 tr，那个特定的 tr 隐藏。

有没有办法使用索引 + 1 来告诉它显示哪个隐藏的 tr？或者有没有办法用第一个 child 的功能来做到这一点？或者有更好的方法吗？

我不能将特定的类名与隐藏的 tr 一起使用，因为无法知道页面加载时会有多少待定用户(它们都是从数据库中提取的)。

这是我的代码:

<?php
  for ($output_user = 0; $output_user <= $num_pending - 1; $output_user++)
  {
    echo "\n\t<tr class=\"pending_users\">\n\t\t<td class=\"admin\">".$pending_user[$output_user][0]."</td>";
    echo "\n\t\t<td class=\"m_1\"><input type=\"checkbox\" value=\"approve\"/></td>";
    echo "\n\t\t<td class=\"m_l\"><input type=\"checkbox\" value=\"deny\"/></td>";
    echo "\n\t</tr>";
    echo "\n\t<tr class=\"showhide\">\n\t\t<td class=\"admin\" colspan=\"3\">Name:".$pending_user[$output_user][1]." ".$pending_user[$output_user][2]."\nEmail: ".$pending_user[$output_user][3]."\nEnrol Date: ".$pending_user[$output_user][4]."</td>\n\t</tr>";
    echo "\n\t</tr>";
  }
?>
<script>
 $(document).ready(function() {
  //Hides specific user details when the page loads
  $("div.show_user_info tr.showhide:visible").hide();

  //Makes every other row another bgcolor - effects pending user table only
  $("tr.pending_users:odd").css("background-color", "#ffff00");
 });

 $("td.admin").click(function () {
  $("div.show_user_info tr.showhide:hidden").slideDown("slow");
 });

 $("tr.showhide").click(function () {

  $(this).slideUp("slow");          
 });
</script>

Answer 1

使用$(this).parent().next('tr.showhide')获取被点击单元格父行的下一个tr.showhide:

$('tr.pending_users td.admin')
      .click(function(){$(this).parent()
                        .next('tr.showhide')
                         .slideToggle();});

slideToggle() 切换可见性。

演示:http://jsfiddle.net/doktormolle/kCL5A/