1

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

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

它实际上在做的是在我单击带有用户名的 tr 时显示所有隐藏的 tr，然后如果我单击以前隐藏的 tr 之一，则该特定 tr 将隐藏。

有没有办法使用 index + 1 告诉它要显示哪个隐藏的 tr ？或者有没有办法用第一个孩子功能做到这一点？还是有更好的方法来做到这一点？

我不能将特定的类名与隐藏的 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>
4

1 回答 1

3

用于$(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/

于 2012-10-07T05:56:21.687 回答