Could anyone assist with the following problem?
I'm using JavaScript to hide/show table rows depending on the option
selected in radio buttons. The script works fine in IE but in Firefox
the hidden rows take up page space even though their content is not
visible.
I have extracted the necessary code as shown below:
************************************************** **********************
<html>
<head>
<title>Firefox_Error</title>
<script>
function setOptionField(selected){
if (selected ==0) {
document.getElementById('option1').style.display=' block';
document.getElementById('option2').style.display=' none';
document.getElementById('option3').style.display=' none';
} else if (selected ==1) {
document.getElementById('option1').style.display=' none';
document.getElementById('option2').style.display=' block';
document.getElementById('option3').style.display=' none';
} else {
document.getElementById('option1').style.display=' none';
document.getElementById('option2').style.display=' none';
document.getElementById('option3').style.display=' block';
}
}
</script>
</head>
<body>
<table border='0'>
<tr><td><input name="rdSelect" type="radio" value="Row 1"
onclick=setOptionField(0) checked></td><td>Display row 1</td></tr>
<tr><td><input name="rdSelect" type="radio" value="Row 2"
onclick=setOptionField(1)></td><td>Display row 2</td></tr>
<tr><td><input name="rdSelect" type="radio" value="Row 3"
onclick=setOptionField(2)></td><td>Display row 3</td></tr>
</table>
<table border = "1">
<tr id="option1" style="display:block"><td><b>Row One
Displayed</b></td></tr>
<tr id="option2" style="display:none"><td><b>Row Two
Displayed</b></td></tr>
<tr id="option3" style="display:none"><td><b>Row Three
Displayed</b></td></tr>
</table>
</body>
</html>
************************************************** **********************
Thanks in advance.