1
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
- FOR (f, f>0, f++)
- <td style="background-color: #CCC"><a href="#" onclick="return toggleItem('collapse_myTbody1[f]')">Toggle 1</a></td></tr>
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="javas cript">
function getItem(id)
{
var itm = false;
if(document.get ElementById)
itm = document.getEle mentById(id);
else if(document.all )
itm = document.all[id];
else if(document.lay ers)
itm = document.layers[id];
return itm;
}
function toggleAll(dowha t)
{
var tags = document.getEle mentsByTagName( '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.di splay == 'none')
itm.style.displ ay = '';
else
itm.style.displ ay = 'none';
return false;
}
</script>
</head>
<body>
<a href="#" onclick="return toggleAll('coll apse')">Collaps e All</a>
<a href="#" onclick="return toggleAll('expa nd')">Expand All</a>
<table width="400">
<tbody>
<tr><td style="backgrou nd-color: #CCC"><a href="#" onclick="return toggleItem('col lapse_myTbody1' )">Toggle 1</a></td></tr>
</tbody>
<tbody class="collapse _obj" id="collapse_my Tbody1">
<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="backgrou nd-color: #CCC"><a href="#" onclick="return toggleItem('col lapse_myTbody2' )">Toggle 2</a></td></tr>
</tbody>
<tbody class="collapse _obj" id="collapse_my Tbody2">
<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="backgrou nd-color: #CCC"><a href="#" onclick="return toggleItem('col lapse_myTbody3' )">Toggle 3</a></td></tr>
</tbody>
<tbody class="collapse _obj" id="collapse_my Tbody3">
<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]
