expanding html tables

sir pannels · 05-26-2006, 11:30 AM

hi all .. i trust you are all well

Ok not to sure how to describe what Im after here but will give it my best go..

I have a html table with 4 rows .. let say it looks like this ..

ROW 1
ROW 2
ROW 3
ROW 4

now, i have some more rows which i want under those as this .

ROW 1
sub row 2
sub row 2
sub row 3
sub row 4
ROW 2
sub row 2
sub row 2
sub row 3
sub row 4
ROW 3
sub row 2
sub row 2
sub row 3
sub row 4
ROW 4
sub row 2
sub row 2
sub row 3
sub row 4

I can do that, obviously easy in HTML .. however I want to use Java script to hid e the sub rows when the page loads initially.. then when they click each main row link with an OnClick event they get the sub rows expanded for each row..

I have looked at using divs and hidding them and making them visiable on click however the problem is they are displayed on top of the other data on page.. i would like the table to expand to fit the rows.

Anyone have any good links on this sort of thing, or any pointers?
cheers,

sir p

Kor · 05-26-2006, 12:22 PM

You must nest your so called "subrows" in Tbodies

table

tbody
row /row
row /row
row /row
/tbody

tbody
row /row
row /row
row /row
/tbody

/table

On the other hand, be careful, when using display, don't use display block, as it is not a standard value for table or table's elements (only IE will take it). use:

tbodyelement.style.display="";

sir pannels · 05-26-2006, 12:30 PM

hi kor
thanks for reply!

umm little lost though,

how exactly do i use tbody and tbodyelement.style.display="";?

Kor · 05-26-2006, 01:35 PM

PHP Code:


			
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript">
var oTbo;
function showhide(tbo){
var nextS=tbo;
while(!nextS.nodeName||nextS.nodeName.toLowerCase()!='tbody'){
nextS=tbo.nextSibling;
}
nextS.style.display=nextS.style.display=='none'?'':'none';
}
function hideAll(){
for(var i=1;i<oTbo.length;i+=2){
oTbo[i].style.display='none';
}
}
onload=function(){
oTbo=document.getElementsByTagName('tbody');
hideAll();
}
</script>
</head>
<body>
<table width="400" border="1" cellspacing="0" cellpadding="2">
<!-- GROUP 1 -->
<tbody>
<tr> 
<td colspan="2" onclick="showhide(this.parentNode.parentNode.nextSibling)">show/hide subrows1</td>
</tr>
</tbody>
<tbody>
<tr> 
<td>1</td>
<td>1</td>
</tr>
<tr> 
<td>1</td>
<td>1</td>
</tr>
<tr> 
<td>1</td>
<td>1</td>
</tr>
</tbody>
<!-- // END GROUP 1 -->
<!-- GROUP 2 -->
<tbody>
<tr> 
<td colspan="2" onclick="showhide(this.parentNode.parentNode.nextSibling)">show/hide subrows2</td>
</tr>
</tbody>
<tbody>
<tr> 
<td>2</td>
<td>2</td>
</tr>
<tr> 
<td>2</td>
<td>2</td>
</tr>
<tr> 
<td>2</td>
<td>2</td>
</tr>
</tbody>
<!-- // END GROUP 2 -->
<!-- GROUP 3 -->
<tbody>
<tr> 
<td colspan="2" onclick="showhide(this.parentNode.parentNode.nextSibling)">show/hide subrows3</td>
</tr>
</tbody>
<tbody>
<tr> 
<td>3</td>
<td>3</td>
</tr>
<tr> 
<td>3</td>
<td>3</td>
</tr>
<tr> 
<td>3</td>
<td>3</td>
</tr>
</tbody>
<!-- // END GROUP 3 -->
</table>

</body>
</html>

tr755916 · 01-19-2009, 02:45 AM

Hi Kor,

I know this thread is old, but I have been following it, and I am having difficulties. I have added images within the table "sub rows" and unfortunately it will pre-load all of them before it collapses. Is there any way to make the sub rows collapse before the images load, so they can either load once the first row is clicked or behind the scenes?

Thank you,
t