Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

how to hide/show a table

Status
Not open for further replies.

lmichiel

MIS
Mar 27, 2001
19
NL
I would like to hide or show tables according to a value of a drop down box. I was able to do this using javascript but when I tried to do this in a page full of vbscript code part of a database application made by Dreamweaver, the script didn't work anymore.
Any ideas how to do this in VBScript?

cheers
Leo
 
>I was able to do this using javascript ...
It is the same way in vbscript. Show your javascript way and it can then be translated.
 
Here you go: it's not a very nice script and could be made far more intelligent but I'm not a programmer :)


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "<html>
<head>
<script language="javascript">
function hideTable()
{
document.getElementById('tbl1').style.display = 'none';
document.getElementById('tbl2').style.display = 'none';
document.getElementById('tbl3').style.display = 'none';
}
function showTable(obj)
{
obj.style.display = 'block';
}

function SwapTable ()
{
var list=document.forms[0].selTable;
a=list.options[list.selectedIndex].value;
if (a == 'tbl1' ) {
showTable(document.getElementById('tbl1'));
document.getElementById('tbl2').style.display = 'none';
document.getElementById('tbl3').style.display = 'none';
} else
if (a == 'tbl2' ) {
showTable(document.getElementById('tbl2'));
document.getElementById('tbl1').style.display = 'none';
document.getElementById('tbl3').style.display = 'none';
} else
if (a == 'tbl3' ) {
showTable(document.getElementById('tbl3'));
document.getElementById('tbl2').style.display = 'none';
document.getElementById('tbl1').style.display = 'none';
};
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
</head>

<body onload="hideTable()">

<form name="form1" method="post" action="">
<p>
Show table:
<select name="selTable" id="selTable" onchange="SwapTable()">
<option value="tbl1">A</option>
<option value="tbl2">B</option>
<option value="tbl3">C</option>
</select>
</p>
<table width="200" border="0" id="tbl1">
<tr>
<td>Table</td>
<td>A</td>
</tr>
</table>
<table width="200" border="0" id="tbl2">
<tr>
<td>Table</td>
<td>B</td>
</tr>
</table>
<table width="200" border="0" id="tbl3">
<tr>
<td>Table</td>
<td>C</td>
</tr>
</table>
<p>&nbsp; </p>
</form>
</body>
</html>
 
First thing first.
>[tt]<script language="javascript">[/tt]
[tt]<script language="vbscript">[/tt]

Then the functions.[tt]
>function hideTable()
> {
> document.getElementById('tbl1').style.display = 'none';
> document.getElementById('tbl2').style.display = 'none';
> document.getElementById('tbl3').style.display = 'none';
> }[/tt]
Is exactly, or practically, the same.
[tt]
sub hideTable
document.getElementById("tbl1").style.display = "none"
document.getElementById("tbl2").style.display = "none"
document.getElementById("tbl3").style.display = "none"
end sub
[/tt]
Same principle for showTable.
[tt]
sub showTable(obj)
obj.style.display = "block"
end sub
[/tt]
SwapTable may be more involved.
[tt]
sub SwapTable
set list=document.forms(0).selTable
a=list.options[list.selectedIndex].value;
if a = "tbl1" then
showTable document.getElementById("tbl1")
document.getElementById("tbl2").style.display = "none"
document.getElementById("tbl3").style.display = "none"
elseif a = "tbl2" then
showTable document.getElementById("tbl2")
document.getElementById("tbl1").style.display = "none"
document.getElementById("tbl3").style.display = "none"
elseif a = "tbl3"
showTable document.getElementById("tbl3")
document.getElementById('tbl2').style.display = "none"
document.getElementById("tbl1").style.display = "none"
end if
end sub
[/tt]
Get rid of empty parentheses. (You can keep it everywhere if you like.)
[tt]
<body onload="hideTable">
<select name="selTable" id="selTable" onchange="SwapTable">
[/tt]
This shows you the big picture. Next time, you do your own work.
 
Thanks but I get an error:
Microsoft VBScript compilation error '800a0401'

Expected end of statement

/customersupport/global/test2.asp, line 16

a=list.options[list.selectedIndex].value
--------------^
 
>[tt]a=list.options[list.selectedIndex].value[/tt]
Forgotten to change square to round.
[tt]a=list.options[red]([/red]list.selectedIndex[red])[/red].value[/tt]
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top