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

Question

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

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

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

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

我不能在隐藏的tr中使用特定的类名，因为无法知道页面加载时会有多少未决用户（它们都是从db中提取的）。

下面是我的代码：

<?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/