Menu
Hi
I am very new to writing anythig with Javascript, so please bear with me.
I have a big table, and I want to contract and expand a specific number of rows on the table (keeping the same amount of columns).
In other words, say for ex I have a table with 3 rows. Now I want to (if you click on a link that says ‘more’) expand row nr 2 so that if you click on it it has 4 more rows (with the same nr of columns), and if you click on it again it ‘dissapears’ back to the original 3 row table.
So basically it just makes the already showing table ‘longer’ and ‘shorter’
Here is my code:
<html>
<head>
<title>Bla bla</title>
<script type=”text/javascript”>
function toggle(id) {
var obj = “”;
if (document.getElementById)
obj = document.getElementById(id);
else if(document.all)
obj = document.all[id];
else if(document.layers)
obj = document.layers[id]
else
return 1;
if (!obj) {
return 1;
}
else if ( obj.style )
{
obj.style.display = (obj.style.display != “none”) ? “none” : “”;
}
else
{
obj.visibility =”show”;
}
}
</script>
</head>
<body>
<table border=”3″ cellpadding=”2″ cellspacing=”2″ style=”text-align: center; vertical-align: middle; width: 66%;”>
<div id=”table1″ style=”display:none”>
<tr>
<td align=right class=”plaintext”> some text
<a href=”javascript:toggle(‘table1’);” onclick=”javascript:toggle(‘table1’);”>Expand table</a></td>
<td align=center class=”plaintextbold”> <a href=”bla”>All<br> Times</a> </td>
<td align=center> <a href=”bla.gif”> <img src=”bla.gif”></a></td>
<td align=center> <a href=”bla.gif”> <img src=”bla.gif”></a></td>
<td align=center> <a href=”bla.gif”> <img src=”bla.gif”></a></td>
<td align=center> <a href=”bla.gif”> <img src=”bla.gif”></a></td>
<td align=center> <a href=”bla.gif”> <img src=”bla.gif”></a></td>
</tr>
</table>
</div>
</body>
I cannot get it to work at all.
Liek I said, I’m fairly new to this, so any help at all would be appreciated.