ryanbutler
07-16-2007, 10:02 PM
Hi,
I found this code in another thread with the JS forum and wondered if it could be amended to do the following:
Show/hide content of a table row. The area of concern for me with this is that Mozilla uses the DOM display of table-row, while IE uses display of block to show table rows. The other area of concern is a way to make the default option "select" reset the row back to hidden, which would be the default state. I'll be the first to admit I'm not a JS guru...any suggestions about how I might implement this would be helpful:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<script type="text/javascript">
var num = 6;
function InstShow(what)
{
var el = document.forms['stateForm'].selState.options;
if(el[el.selectedIndex].value != 'none')
{
for(var i = 1; i <= num; i++)
{
document.getElementById('dID'+i).style.display = 'none';
}
document.getElementById('dID'+what).style.display = 'block';
}
}
window.onload = function()
{
for(var i = 1; i <= num; i++)
{
document.getElementById('dID'+i).style.display = 'none';
}
}
</script>
</head>
<body>
<form method="get" name="stateForm" id="stateForm">
<select name="selState" id="selState" onChange="InstShow(this.options[this.options.selectedIndex].value)">
<option value="none">Select your state</option>
<option value="1">Texas</option>
</select>
</form>
<table>
<tr id="dID1">
<td>info here 1</td>
</tr>
</table>
</body>
</html>
I found this code in another thread with the JS forum and wondered if it could be amended to do the following:
Show/hide content of a table row. The area of concern for me with this is that Mozilla uses the DOM display of table-row, while IE uses display of block to show table rows. The other area of concern is a way to make the default option "select" reset the row back to hidden, which would be the default state. I'll be the first to admit I'm not a JS guru...any suggestions about how I might implement this would be helpful:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<script type="text/javascript">
var num = 6;
function InstShow(what)
{
var el = document.forms['stateForm'].selState.options;
if(el[el.selectedIndex].value != 'none')
{
for(var i = 1; i <= num; i++)
{
document.getElementById('dID'+i).style.display = 'none';
}
document.getElementById('dID'+what).style.display = 'block';
}
}
window.onload = function()
{
for(var i = 1; i <= num; i++)
{
document.getElementById('dID'+i).style.display = 'none';
}
}
</script>
</head>
<body>
<form method="get" name="stateForm" id="stateForm">
<select name="selState" id="selState" onChange="InstShow(this.options[this.options.selectedIndex].value)">
<option value="none">Select your state</option>
<option value="1">Texas</option>
</select>
</form>
<table>
<tr id="dID1">
<td>info here 1</td>
</tr>
</table>
</body>
</html>