CODEWITHSUNDEEP
phpjavascriptonclicktablerow
Beaker
Beaker

Reputation: 187

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

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.

Upvotes: 0

Views: 2073

Answers (3)

Renato Zannon
Renato Zannon

Reputation: 29941

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();
  });
});​

Upvotes: 2

Roger Ng
Roger Ng

Reputation: 779

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

Upvotes: 1

Adrien Delessert
Adrien Delessert

Reputation: 1360

You can certainly do this by making your clickable '+' into a link that calls your php script with a querystring describing what you clicked on, and have the php return the page with extra details for the user named in the querystring...but it would likely be a better user experience to do it with javascript.

Upvotes: 0

Related Questions