How can I add a table row using an onclick event in a td

Question

Okay, so I have it dropping down another under a username when clicked on, showing the name, email, etc for that user, but it's dropping down the user info for each user under each user name, instead of just below the one I clicked on.

Is there a way to tell it to show the next element only, instead of all the hidden ones?

I've tried grabbing the index of the clicked on (the one with the user name, but I can't seem to get a function to work using any type of index+1 type logic.

Here's the code I have now:

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

---

The page I'm working on is an admin page where the user can approve or deny registration requests. I'm using php to dynamically create a table row for each user in a database that's pending registration.

That being said, when the user clicks on the that the users username is in, I want to insert a + that will show that users info (name, request date, etc), and that will disappear when the user clicks on another with another username on it, and have it display another row, etc for that user.

The php I'm using to create the table rows is this:

<?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>";
    }
?>

Can I create an onclick event that does this using php, or would I need to use javascript? I've been all over the internets looking for examples of something similar, and I can't find anything helpful.

Answer 1

For convenience and cross-browser compatibility I've used jQuery for that, but surely you could do that without it (or even without javascript at all, if your users don't mind having the page reloading every time).

I've assumed a structure where you will have an element with the details class that contains the extra information that you want to maintain hidden by default. Check out my jsFiddle to see how it works in practice.

$(".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

You are strong advised to use jQuery to achieve this. Add a <div id="user_info"></div> in the place that you would like to display the information.

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

Answer 3

您当然可以通过将可点击的'+'变成一个链接，该链接使用描述您单击内容的querystring调用您的php脚本，并让php返回页面，其中包含在querystring中命名的用户的额外详细信息...但是使用javascript这样做可能会带来更好的用户体验。