By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
437,600 Members | 1,887 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 437,600 IT Pros & Developers. It's quick & easy.

Dynamic Collapsible Tables for any number of tables

P: 1
I'm newbie to javascript and I did an extensive search on this site and couple of others looking for directions.
I'm attempting to write some custom javascript for collapsing the tables and fit it in an existing application already provided. I found some code on the web that works great. In this example there are 3 fixed set of tables with 3 fixed/hardcoded "id".
I tried to fit this code into a FOR loop so it becomes dynamic and it would work for any number and not just 3 tables.

Expand|Select|Wrap|Line Numbers
  1. FOR (f, f>0, f++)
  2. <td style="background-color: #CCC"><a href="#" onclick="return toggleItem('collapse_myTbody1[f]')">Toggle 1</a></td></tr>
  3.  
But it is not working.
Has anyone done this before. Can anyone share some ideas or pointers?

Regards,
MHT
NY City.


[HTML]<html>
<head>
<title>My Doc</title>
<script language="javascript">
function getItem(id)
{
var itm = false;
if(document.getElementById)
itm = document.getElementById(id);
else if(document.all)
itm = document.all[id];
else if(document.layers)
itm = document.layers[id];

return itm;
}

function toggleAll(dowhat)
{
var tags = document.getElementsByTagName('tbody');
if(!tags)
return false;

for(var i = 0; i < tags.length; i++)
{
if(tags[i].className == 'collapse_obj')
{
if(dowhat == 'collapse')
tags[i].style.display = 'none';
else
tags[i].style.display = '';
}
}

return false;
}

function toggleItem(id)
{
itm = getItem(id);

if(!itm)
return false;

if(itm.style.display == 'none')
itm.style.display = '';
else
itm.style.display = 'none';

return false;
}
</script>
</head>
<body>

<a href="#" onclick="return toggleAll('collapse')">Collapse All</a>
<a href="#" onclick="return toggleAll('expand')">Expand All</a>

<table width="400">
<tbody>
<tr><td style="background-color: #CCC"><a href="#" onclick="return toggleItem('collapse_myTbody1')">Toggle 1</a></td></tr>
</tbody>

<tbody class="collapse_obj" id="collapse_myTbody1">
<tr><td>Test row1</td></tr>
<tr><td>Test row2</td></tr>
<tr><td>Test row3</td></tr>
<tr><td>Test row4</td></tr>
<tr><td>Test row5</td></tr>
</tbody>
</table>

<table width="400">
<tbody>
<tr><td style="background-color: #CCC"><a href="#" onclick="return toggleItem('collapse_myTbody2')">Toggle 2</a></td></tr>
</tbody>

<tbody class="collapse_obj" id="collapse_myTbody2">
<tr><td>Test row1</td></tr>
<tr><td>Test row2</td></tr>
<tr><td>Test row3</td></tr>
<tr><td>Test row4</td></tr>
<tr><td>Test row5</td></tr>
</tbody>
</table>

<table width="400">
<tbody>
<tr><td style="background-color: #CCC"><a href="#" onclick="return toggleItem('collapse_myTbody3')">Toggle 3</a></td></tr>
</tbody>

<tbody class="collapse_obj" id="collapse_myTbody3">
<tr><td>Test row1</td></tr>
<tr><td>Test row2</td></tr>
<tr><td>Test row3</td></tr>
<tr><td>Test row4</td></tr>
<tr><td>Test row5</td></tr>
</tbody>
</table>

</body>
</html>[/HTML]
Aug 30 '06 #1
Share this Question
Share on Google+
1 Reply


acoder
Expert Mod 15k+
P: 16,027
Either use innerHTML, e.g.
Expand|Select|Wrap|Line Numbers
  1. for (f=0, f<max, f++) {
  2.     tableObj.innerHTML+='<td style="background-color: #CCC"><a href="#" onclick="return toggleItem(\'collapse_myTbody'+f+'\')">Toggle 1</a></td></tr>';
  3.  
or use the DOM methods, e.g.
Expand|Select|Wrap|Line Numbers
  1. for (f = 0; f < max; f++) {
  2.     var table = document.createElement("table");
  3.     var tbody = document.createElement("tbody");
  4.     ...
  5.     td.style.backgroundColor = "#CCC";
  6.     ...
  7.     tbody.appendChild(tr);
  8.     table.appendChild(tbody);
See this link for more information.
May 13 '08 #2

Post your reply

Sign in to post your reply or Sign up for a free account.