php - 如何使用 td 中的 onclick 事件添加表格行

Question

好的，所以我让它在点击时在用户名下下拉另一个，显示该用户的姓名、电子邮件等，但它在每个用户名下下拉每个用户的用户信息，而不是在我点击了一个。

有没有办法告诉它只显示下一个元素，而不是所有隐藏的元素？

我尝试获取点击的索引(带有用户名的索引，但我似乎无法使用任何类型的索引+1类型逻辑来获取函数。

这是我现在的代码:

<?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 () {
  var nextIndex = $("tr").index(this) + 1;
  $("div.show_user_info tr.showhide:hidden").slideDown("slow");
 });

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

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

<小时/>

我正在处理的页面是一个管理页面，用户可以在其中批准或拒绝注册请求。我正在使用 php 为数据库中待注册的每个用户动态创建一个表行。

话虽这么说，当用户单击用户用户名所在的位置时，我想插入一个 + 来显示用户信息(姓名、请求日期等)，并且当用户单击时该 + 会消失另一个上面有另一个用户名，并让它为该用户显示另一行，等等。

我用来创建表行的 php 是这样的:

<?php
    for ($output_user = 0; $output_user <= $num_pending - 1; $output_user++)
    {
        echo "\n\t<tr>\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>";
    }
?>

我可以创建一个使用 php 执行此操作的 onclick 事件，还是需要使用 javascript？我一直在互联网上寻找类似的例子，但找不到任何有用的东西。

Answer 1

为了方便和跨浏览器兼容性，我使用了 jQuery，但是如果没有它，您当然也可以做到这一点(或者甚至根本不需要 javascript，如果您的用户不介意每次都重新加载页面)。

我假设了一个结构，其中您将有一个带有 details 类的元素，其中包含您希望默认保持隐藏的额外信息。查看my jsFiddle看看它在实践中是如何运作的。

$(".details").each(function() {
  var $link = $("<a href='javascript:void(0)'>+</a>");
  var $details = $(this);
  $details.hide().before($link);

  $link.on("click", function() {
    $details.toggle();
    $(".details").not($details).hide();
  });
});​