Question

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

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

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

有没有办法使用索引+ 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>

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/

当点击另一个tr时，使用javascript / jQuery显示下一个tr

1 个答案: