PDA

View Full Version : dynamic collapsible table



felixtfelix
Jun 5th, 2008, 10:25 AM
Dear All,

I have a table like this

<table>

<thead>
<tr>
-- many th goes here
</tr>
</thead>

<tbody>
<tr>
<td></td>
<td></td>
</tr>

--many tr goes here

</tbody>
</table>



I want to create a collapsive table like

+tr1
+tr2
+tr3

if i click on tr1
then it should be

-tr1
<tr>
<tr>
+tr2
+tr3

kindly note that the <tr> under the tr1 will be added dynamically (may be from the database using AJAX).

again if u click on -tr1. all the tr can be expanded. this functionality should be available to the tbody rows only.

it should be

+tr1
+tr2
+tr3

Thanks & Regards

Felix

rangana
Jun 5th, 2008, 10:33 AM
Show us what you've got so far.

felixtfelix
Jun 5th, 2008, 11:35 AM
hi,

i got this script from somewhere

<!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 data0= [
['Data red','Data yekk','Data gren'],
['Data x','Data y','Data z'],
['Data 55','Data 56','Data 67'],
['Data fgdfg','Data dfgd f','Data sdfwser']
]

var data1 = [
['Data red','Data yekk','Data gren'],
['Data x','Data y','Data z']
]

function showhide(c,i){
var rows=document.getElementById('my_table').getElementsByTagName('tr');
var next=c.parentNode.nextSibling;
var row;
if(c.parentNode.rowIndex==rows.length){
row = addRow(i);
rows[0].parentNode.appendChild(row)
c.firstChild.nodeValue='hide';
}
else{
while(next.nodeName.toLowerCase()!='tr'){next=next.nextSibling}
if(next.getAttributeNode('foo')){
next.style.display=next.style.display==''?'none':'';
c.firstChild.nodeValue=c.firstChild.nodeValue=='hide'?'show':'hide';
}
else{

//add rows
for(var j=0;j<window["data" +i].length;j++){
row = addRow(i,j);
rows[0].parentNode.insertBefore(row,next);
}
c.firstChild.nodeValue='hide';
}
}
}
function addRow(i,j){
var row = document.createElement('tr');
row.setAttribute('foo','fee');

//now go through each sub elements
for (var k=0; k<window["data" +i][j].length; k++) {
var cel=document.createElement('td');
cel.appendChild(document.createTextNode(window["data" +i][j][k]))
//alert(cel);
row.appendChild(cel)
}
return row;
}
</script>
</head>
<body>
<table width="400" border="1" id="my_table">
<tbody>
<tr>
<td width="33%"><strong>Col 1</strong></td>
<td width="33%"><strong>Col 2</strong></td>
<td><strong>Col 3</strong></td>
</tr>
<tr>
<td colspan="3" onclick="showhide(this,0)">show</td>
</tr>
<tr>
<td colspan="3" onclick="showhide(this,1)">show</td>
</tr>
</tbody>
</table>

</body>
</html>

This is the same way i want. I tried this script in my scenario. when i running this script i face couple of problems.
1. when i expand it it is showing four rows, if i again click on that only the first row only gone remaining three rows are there.
2. In the second row when i click i got some javascript error.