Dynamic html table with PHP
I'm spending a lot of time on what seems like a simple problem, but I cannot seem to figure this out. I'm trying to create a "Expand/Collapse" thing so that when I click on "Expand" it shows the hidden rows of a HTML table.
What I'm wanting and what I'm getting are two different things; I'm getting the row to show up, but it looks like it's showing up inside of a cell instead of a separate row of the table. I would like it to show up simply as an additional row of the table.
Here is a link: https://www.thenpg.com/index_closed.html Click on the "Expand" anchor to see what is happening. You'll have to refresh the page to reset it as I haven't put in the collapse code as of yet.
Thank you.
The workaround: I was already using the Prototype Javascript library, and I must have been really tired when initially starting this project of expanding/collapsing table rows because I should have realized that Prototype does all of the heavy lifting, so-to-speak, when figuring out what to display.
I know this is mainly a javascript issue, but there is a little PHP involved, too.
It turns out that if you are interested in hiding multiple rows of a table--let's say the rows you wish to hide are associated with the row above it so displaying the additional rows would be almost completely redundant--you can do what I am doing in creating a "group id" that matches, in my case, the parent "project id". Check to see if the groupid matches the projectid, and then check to see if the parent entry has been displayed yet. If the parent entry has been displayed then you skip displaying the entry again and instead add it to the hidden group of rows underneath the parent entry. Continue to iterate through the records until all of the records are spent.
Since I want to use javascript to expand/collapse the rows of the table, I have to know how many hidden rows have been created and then I need to know what the id is of each hidden row. I do this in PHP by using a simple counter and appending a "_$i" to the end of what I am calling the "ebasename", which is "grouped_projects" in this case. Since I create the Expand anchor before I create the groups of hidden rows, and since I only want it displayed once, then using this method for naming the ids of the hidden rows allows me to call an external javascript function passing the "ebasename" and then appending the "_" and row number to each of "ebasename" and while "ebasename" is defined. I then use the Prototype/Scriptaculous library to take care of toggling the rows on and off. When I'm done toggling, I change the text of the Expand anchor link to "Collapse", and simply call the same javascript function to close the rows.
I have updated the link to the example. You can now click on "Expand" and regardless of what browser you are in [only tested in IE and Firefox], the table row works as expected. I see that now I just have to redo the column headers to match the data displayed, but I wanted to just show that the original problem has been solved.
Thanks again.
What I'm wanting and what I'm getting are two different things; I'm getting the row to show up, but it looks like it's showing up inside of a cell instead of a separate row of the table. I would like it to show up simply as an additional row of the table.
Here is a link: https://www.thenpg.com/index_closed.html Click on the "Expand" anchor to see what is happening. You'll have to refresh the page to reset it as I haven't put in the collapse code as of yet.
Thank you.
UPDATE:
Thank you all for your help. It is fixed! I had forgotten about the different arguments that can be used with the Display property. Unfortunately, what I have found is that Internet Explorer doesn't support many of the "table" type arguments, which just happened to be the type that I needed to use.The workaround: I was already using the Prototype Javascript library, and I must have been really tired when initially starting this project of expanding/collapsing table rows because I should have realized that Prototype does all of the heavy lifting, so-to-speak, when figuring out what to display.
I know this is mainly a javascript issue, but there is a little PHP involved, too.
It turns out that if you are interested in hiding multiple rows of a table--let's say the rows you wish to hide are associated with the row above it so displaying the additional rows would be almost completely redundant--you can do what I am doing in creating a "group id" that matches, in my case, the parent "project id". Check to see if the groupid matches the projectid, and then check to see if the parent entry has been displayed yet. If the parent entry has been displayed then you skip displaying the entry again and instead add it to the hidden group of rows underneath the parent entry. Continue to iterate through the records until all of the records are spent.
Since I want to use javascript to expand/collapse the rows of the table, I have to know how many hidden rows have been created and then I need to know what the id is of each hidden row. I do this in PHP by using a simple counter and appending a "_$i" to the end of what I am calling the "ebasename", which is "grouped_projects" in this case. Since I create the Expand anchor before I create the groups of hidden rows, and since I only want it displayed once, then using this method for naming the ids of the hidden rows allows me to call an external javascript function passing the "ebasename" and then appending the "_" and row number to each of "ebasename" and while "ebasename" is defined. I then use the Prototype/Scriptaculous library to take care of toggling the rows on and off. When I'm done toggling, I change the text of the Expand anchor link to "Collapse", and simply call the same javascript function to close the rows.
I have updated the link to the example. You can now click on "Expand" and regardless of what browser you are in [only tested in IE and Firefox], the table row works as expected. I see that now I just have to redo the column headers to match the data displayed, but I wanted to just show that the original problem has been solved.
Thanks again.
