Collapsible tr rows instead of divs?

JavaScript
1

Doed anyone know if there is a way to do something like this:
How to Create a Collapsible DIV with Javascript and CSS

but to hide table rows <tr> instead?

The problem I am running into is the method in that tutorial relies on is document.getElementById, but in order to hide multiple tr rows I would have to assign them classes instead of ids.

2

Check out Hiding and Unhiding Table Rows

3

I think just giving the id and applying the style display none and block in the row (<tr id=“idname” style=“display:none”>) from javascript as you have done in div would be the solution.

4

But, except in IE, table rows aren’t display:block by default and don’t act right in Firefox (and maybe other non-IE browsers too) if you set them to it. In CSS2 table rows are display:table-row by default.

5

As i have done and worked in Firefox 2.0 and IE 6 that display:one and display:(blank no any text) is working collapsing in the case of td. I am not sure on tr. Does this matter in tr and td?

6

what about changing their size and overflow? I have a td that gets maximized to full screen width and height, and then can be restored without any page loads… that works if you want to see it.

document.getElementById(‘tr’).style.width = “0px”
document.getElementById(‘tr’).style.height = “0px”
document.getElementById(‘tr’).style.overflow = “hidden”

---- or if you wanted to hide all tr’s in a table ----

var tableId = document.getElementById(‘table1’);

tableId.getElementsByTagName(‘tr’).style.width = “0px”
tableId.getElementsByTagName(‘tr’).style.height = “0px”
tableId.getElementsByTagName(‘tr’).style.overflow = “hidden”

[thats all I could think of, let me know if it helps]

7

Yes, using classes is one way. Using multiple TBODYs is another way. Or another way is to start with a reference to one row (or its row number) and iterate over the next n rows and hide them - no classes or anything extra needed.

It just depends on what you want to accomplish. Tell us something about your application, or give us a link.

8

Sorry for the delay in replying to this. I was trying to work off the tbody tag with a method that I found elsewhere. A test of what I am working on is at: http://cannon.makibiedev.com/temp/test3.shtml

It works almost like I need it to, but I also have to find a way to change the “View all messages” to “hide all messages” when the table is fully expanded. Any idea on the best way to do this?

9

Hi Frankie,

Here is one way - maybe not the “best” way, but just a simple illustration:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style tyup="text/css">
.viewlink {background: url(/images/icons/sm_plus_icon.jpg) no-repeat 0 2px; padding-left: 14px; }
.analysis {width: 748px; margin: 0; border: 1px solid #666666; border-top: 4px solid #666666; border-right: 0; }
.analysis th {border: 1px solid #CCCCCC; height: 25px; vertical-align: bottom;  }
.analysis th a:link, .analysis th a:visited, .analysis th a:active {color: #666666; display: block; margin-right: 10px; }
.analysis th a:hover {color: #666666; }
.analysis td {text-align: left; border: 1px solid #CCCCCC; height: 25px; vertical-align: middle; padding: 0 6px;  }
</style>
<script type='text/javascript'>
window.onload = function()
{
  document.getElementById('viewLink1').onclick = viewOnClick;
};
function viewOnClick()
{
  if(document.getElementById('allmessages').style.display == 'none') {
    document.getElementById('allmessages').style.display = '';
    if (this.firstChild) this.firstChild.data = 'View Summary';
  }
  else {
    document.getElementById('allmessages').style.display = 'none';
    if (this.firstChild) this.firstChild.data = 'View all Messages';
  }
  return false;
}
</script>
</head>
<body>
<table class="analysis">
		<tr>
			<th class="datetime"><a href="#" class="sortby">Date/Time</a></th>
			<th class="author"><a href="#" class="sortby">Author</a></th>
			<th class="message nor"><a href="#" class="sortby">Message</a></th>
			
		</tr>
		<tr>
			<td>01/24/07 4:23 AM</td>
			<td>Bob Smith</td>
			<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</td>
		</tr>
		<tr>
			<td>02/24/07 4:23 AM</td>
			<td>Ed Jonees</td>
			<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</td>
		</tr>
		<tbody id="allmessages" style="display: none;">
		<tr>
			<td>01/24/07 4:23 AM</td>
			<td>Edmund Hillary</td>
			<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</td>
		</tr>
		<tr>
			<td>02/24/07 4:23 AM</td>
			<td>Tenzing Norgay</td>
			<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</td>
		</tr>
		</tbody>
	</table>
	<p class="viewall">
	<a id='viewLink1' href="" class="viewlink">View all Messages</a></p>
</body>
</html>