D
Dave Ello
Hi all,
I am absolutely no Javascript developer (as will be evident by the code
presented), but I've created a simple bit of code that wil expand/collapse
rows in a table and present the appropiate "+" or "-" symbol. It works in
IE but I'm supposed to NS proof it.
I know there are a gazillion more elegant solutions, but this is my attempt
at writing something generic. If you could either assist with the NS bit or
show me an equally simple way to achieve the same effect, without tree
controls etc. I would appreciate it very much and owe you a beer (or
wine...)!
The code is below.
Regards,
David Eldridge
-----------------------
<html>
<head>
<script language=javascript>
function hidetbl(obj)
{
// Hide the passed table and present a "+" symbol
// with the Javascript to show the table again
var objTable;
var objClickableText;
var newHTML;
var txtIndex;
objTable = document.all[obj];
objTable.style.display = "none";
txtIndex = obj.substr(3,1)
objClickableText = document.all["cat" + txtIndex]
newHTML = "<div id='cat" + txtIndex
newHTML = newHTML + "' onclick=\"showtbl('prd"
newHTML = newHTML + txtIndex + "')\">+</div>";
objClickableText.outerHTML=newHTML;
}
function showtbl(obj)
{
// Show the passed table and present a "-" symbol
// with the Javascript to show the table again
var objTable;
var objClickableText;
var newHTML;
var txtIndex;
objTable = document.all[obj];
objTable.style.display = "block";
txtIndex = obj.substr(3,1);
objClickableText = document.all["cat" + txtIndex]
newHTML = "<div id='cat" + txtIndex
newHTML = newHTML + "' onclick=\"hidetbl('prd"
newHTML = newHTML + txtIndex + "')\">-</div>";
objClickableText.outerHTML=newHTML;
}
</script>
</head>
<body>
<table width=310 border=1 cellpadding=1>
<tr>
<td width=10><div id='cat1' onclick="showtbl('prd1')">+</div></td>
<td width=300>Category 1</td>
</tr>
<tr>
<td colspan=2>
<table width=100% id="prd1" style="display:none">
<tr>
<td><em>Prod 1</em></td>
<td><em>Description 1</em></td>
</tr>
<tr>
<td><em>Prod 2</em></td>
<td><em>Description 2</em></td>
</tr>
<tr>
<td><em>Prod 3</em></td>
<td><em>Description 3</em></td>
</tr>
</table>
</td>
</tr>
<tr>
<td width=10><div id="cat2" onclick="showtbl('prd2')">+</div></td>
<td width=300>Category 2</td>
</tr>
<tr>
<td colspan=2>
<table width=100% id="prd2" style="display:none">
<tr>
<td><em>Prod 1</em></td>
<td><em>Description 1</em></td>
</tr>
<tr>
<td><em>Prod 2</em></td>
<td><em>Description 2</em></td>
</tr>
<tr>
<td><em>Prod 3</em></td>
<td><em>Description 3</em></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
I am absolutely no Javascript developer (as will be evident by the code
presented), but I've created a simple bit of code that wil expand/collapse
rows in a table and present the appropiate "+" or "-" symbol. It works in
IE but I'm supposed to NS proof it.
I know there are a gazillion more elegant solutions, but this is my attempt
at writing something generic. If you could either assist with the NS bit or
show me an equally simple way to achieve the same effect, without tree
controls etc. I would appreciate it very much and owe you a beer (or
wine...)!
The code is below.
Regards,
David Eldridge
-----------------------
<html>
<head>
<script language=javascript>
function hidetbl(obj)
{
// Hide the passed table and present a "+" symbol
// with the Javascript to show the table again
var objTable;
var objClickableText;
var newHTML;
var txtIndex;
objTable = document.all[obj];
objTable.style.display = "none";
txtIndex = obj.substr(3,1)
objClickableText = document.all["cat" + txtIndex]
newHTML = "<div id='cat" + txtIndex
newHTML = newHTML + "' onclick=\"showtbl('prd"
newHTML = newHTML + txtIndex + "')\">+</div>";
objClickableText.outerHTML=newHTML;
}
function showtbl(obj)
{
// Show the passed table and present a "-" symbol
// with the Javascript to show the table again
var objTable;
var objClickableText;
var newHTML;
var txtIndex;
objTable = document.all[obj];
objTable.style.display = "block";
txtIndex = obj.substr(3,1);
objClickableText = document.all["cat" + txtIndex]
newHTML = "<div id='cat" + txtIndex
newHTML = newHTML + "' onclick=\"hidetbl('prd"
newHTML = newHTML + txtIndex + "')\">-</div>";
objClickableText.outerHTML=newHTML;
}
</script>
</head>
<body>
<table width=310 border=1 cellpadding=1>
<tr>
<td width=10><div id='cat1' onclick="showtbl('prd1')">+</div></td>
<td width=300>Category 1</td>
</tr>
<tr>
<td colspan=2>
<table width=100% id="prd1" style="display:none">
<tr>
<td><em>Prod 1</em></td>
<td><em>Description 1</em></td>
</tr>
<tr>
<td><em>Prod 2</em></td>
<td><em>Description 2</em></td>
</tr>
<tr>
<td><em>Prod 3</em></td>
<td><em>Description 3</em></td>
</tr>
</table>
</td>
</tr>
<tr>
<td width=10><div id="cat2" onclick="showtbl('prd2')">+</div></td>
<td width=300>Category 2</td>
</tr>
<tr>
<td colspan=2>
<table width=100% id="prd2" style="display:none">
<tr>
<td><em>Prod 1</em></td>
<td><em>Description 1</em></td>
</tr>
<tr>
<td><em>Prod 2</em></td>
<td><em>Description 2</em></td>
</tr>
<tr>
<td><em>Prod 3</em></td>
<td><em>Description 3</em></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>