collapsible table rows

[doddsey_65]

hi, im looking for a way to collapse table rows that are created using a while loop. I have looked around on google and nothing seems to work for me.

Here is the code which generates my tables. I basically want all of the <tr>s in the table to collapse leaving only the <th>s.

 

 

echo '<table class="forum_table"><tr><th class="forum_left_corner"></th><th class="forum_parent_name">'.$parent_name.'</th><th class="empty"></th><th class="empty"></th><th class="forum_last_post_header">'.LAST_POST.'</th></tr>';$sql2 = mysql_query("SELECT 				forum_id,				forum_name,				forum_description,				forum_topics,				forum_posts,				forum_last_poster,				forum_last_post_time,				forum_last_post				FROM ".DB_PREFIX."forums				WHERE parent_id = $parent_id				") or die (mysql_error());while ($row2 = mysql_fetch_object($sql2)) {echo '<tr class="gradient">'; //Collapse all of these so that only the above <th>s are visible$forum_url_name = $row2->forum_name;$forum_url_name = str_replace(' ', '_', $forum_url_name);echo '<td class="forum_icon">	<div class="thread_icon"> </div>	</td>	<td class="forum_name">	<p class="forum_name"><a href="index.php?forum='. $row2->forum_id . '&name='.$forum_url_name.'">' . $row2->forum_name .'</a></p>	<p class="forum_description">' . $row2->forum_description .'</p></td>	<td class="forum_topics">'. $row2->forum_topics .'<span class="small_word"> '.TOPICS.'</span></td>	<td class="forum_posts">'. $row2->forum_posts .'<span class="small_word"> '.POSTS.'</span></td>	<td class="forum_last_post">';	$sql6 = mysql_query("SELECT * 					FROM ".DB_PREFIX."members					") or die(mysql_error());	$row3 = mysql_fetch_object($sql6);	$membergroup = $row3->user_group;	if (!$row2->forum_last_poster) {	echo '<p class="noposts">'.NO_POSTS.'</p>			<p class="be_the_first">'.BE_FIRST.'</p>';	} else {	$forum_last_post = $row2->forum_last_post;	$forum_last_post_clean = str_replace(' ', '_', $row2->forum_last_post);	$data = mysql_query("SELECT topic_id FROM ".DB_PREFIX."topics	WHERE topic_name = '$forum_last_post'");	$topic = mysql_fetch_object($data);	echo '<p class="last_post_name"><a href="index.php?topic='.$topic->topic_id.'	&name='.$forum_last_post_clean.'">'.$row2->forum_last_post.'</a></p>';	echo '<p class="posted_by">Posted By - ';	$today = date('F j, Y');	$last_post = date("F j, Y", strtotime($row2->forum_last_post_time));	if ($last_post == $today) { $last_post = 'Today at '.date("g:i a", strtotime($row2->forum_last_post_time)); }	else { $last_post = date("F j, Y", strtotime($row2->forum_last_post_time)); }	if ($membergroup == 1) { echo 	'<span class="admin">'; }	elseif ($membergroup == 2) { echo 	'<span class="mod">'; }	elseif ($membergroup == 3) { echo 	'<span class="user">'; }	elseif ($membergroup == 0) { echo 	'<span class="user">'; }echo	$row2->forum_last_poster .'</span></p>	<p class="last_post_date">'	.$last_post;	}echo	'</p></td></tr>';}}

 

 

I hope someone can help with this. Thanks

[Psycho]

Well, this is a JavaScript question, so you should be posting the HTML output and not the PHP code. Trying to decypher what the HTML will look like from PHP creates more work on people reviewing your code. However, I will say that there are issues with your PHP logic that should be corrected.

 

First off, you are running a query for membergroup within the loop and it is the EXACT same query each time. Running queries within a loop is very inefficinet - and in this instance it is totally unnecessary since it is the same query. For the query to get the topic_id, you should do a JOIN on the main query instead of doing this query in a loop.

 

I'm also curious why you are referencing the last post for a forum using the topic name instead of the ID. Besides, there is absolutely no reason to identify the last post in the forum record AT ALL. Use the database to get that information dynamically. You are working much harder than you have to.

 

Second, give your variables descriptive names. $sql2 means nothing to someone reviewing the code. You will save yourself and others a lot of time by following good programming standards.

 

I was going to rewrite all of this to be more efficient, but it would require DB changes and other things which I'm not interested in tackling at the moment.

 

Here is a sample script that you can implement.

<html>
<head>

<script type="text/javascript">
function expandCollapseTable(tableObj)
{
    var rowCount = tableObj.rows.length;
    for(var row=1; row<rowCount; row++)
    {
        rowObj = tableObj.rows[row];
        rowObj.style.display = (rowObj.style.display=='none') ? '' : 'none';
    }
    return;
}
</script>

</head>
<body>

Click on the table to expand/collapse the data rows<br /><br />

<table border="1" id="myTable" onclick="expandCollapseTable(this)">
  <tr id="tr1">
    <th>Header 1</th>
    <th>Header 2</th>
    <th>Header 3</th>
  </tr>
  <tr class="gradient">
    <td>Cell 1-1</td>
    <td>Cell 2-1</td>
    <td>Cell 3-1</td>
  </tr>
  <tr class="gradient">
    <td>Cell 1-2</td>
    <td>Cell 2-2</td>
    <td>Cell 3-2</td>
  </tr>
  <tr class="gradient">
    <td>Cell 1-3</td>
    <td>Cell 2-3</td>
    <td>Cell 3-3</td>
  </tr>
</table>

</body>
</html>

 

To implement you will need to define a trigger (e.g. an onclick event) that will fire the function above and the event will need to pass an object reference to the table.

[doddsey_65]

thanks, the expand collapse works perfectly when i added it to my code. i realise there are several coding issues and cleanups to be done. I have started doing this on another page, including table joins and classes. Just havent got far with it. Thanks alot. maybe if you have time later you could have a look at the page i have cleaned up and see if everything within it is clean and good standard. Only if you have time though.