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）。 / p>

我假设一个结构，你将拥有一个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();
  });
});

Answer 2

强烈建议您使用jQuery来实现此目的。在您要显示信息的位置添加<div id="user_info"></div>。

$("#YOUR USER DIV").click(function() {
    $("div#user_info").html("SOME USER INFORMATION WITH HTML");
});

Answer 3

您可以通过点击“+”+＆＃39;来实现这一目标。进入一个链接，用一个描述你点击的内容的查询字符串调用你的php脚本，并让php返回页面，其中包含查询字符串中命名的用户的额外详细信息......但是这样做可能会带来更好的用户体验的JavaScript。

如何在td中使用onclick事件添加表行

3 个答案: