I've got some fields with labels I've put into a table for layout purposes. There's a drop down selection which shows/hides rows in the table depending on the selection. My code is working just the way I want it in IE9, but in Chrome and Firefox, every time a row that was previously hidden is shown, the contents of the row are shifted way out of position.
There are several fields and multiple selections (which I've trimmed down in the code below), so I'm using a switch statement to tell it what to show and hide. How do I make Chrome and Firefox work like IE9 so that the row contents don't move around when they are displayed?
<HTML>
<HEAD>
</HEAD>
<BODY>
<FORM ACTION="#" name=form>
<select name="type" onchange="changeTable()">
<option value="A">A</option>
<option value="B">B</option>
</select>
<BR>
<table ID="options">
<tr>
<td>A, B, C, D</td>
<td><input type=text name="1" size=20 maxlength="20"></td>
</tr>
<tr ID = "A2">
<td>A</td>
<td><input type=text name="2" size=20 maxlength="20"></td>
</tr>
<tr>
<td>A, B, C, D</td>
<td><input type=text name="3" size=10 maxlength="10"></td>
</tr>
<tr ID="A4" style="display:none">
<td>B, D</td>
<td><input type=text name="4" size=10 maxlength="10"></td>
</tr>
<tr ID="A5">
<td>A</td>
<td><select name="5">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</td>
</tr>
<tr ID="A6" style="display:none">
<td>A</td>
<td><input type=text name="6" size=20></td>
</tr>
</table>
<script>
function changeTable(){
var type = document.form.type.value;
switch(type){
case "A":
document.getElementById("A2").style.display = 'block';
document.getElementById("A4").style.display = "none";
document.getElementById("A7").style.display = 'none';
document.getElementById("A8").style.display = 'none';
document.getElementById("A9").style.display = 'none';
document.getElementById("A5").style.display = "block";
break;
case "B":
document.getElementById("A2").style.display = 'none';
document.getElementById("A4").style.display = "block";
document.getElementById("A7").style.display = 'none';
document.getElementById("A8").style.display = 'none';
document.getElementById("A9").style.display = 'none';
document.getElementById("A5").style.display = "none";
document.getElementById("A6").style.display = "none";
break;
}
}
</script>
</BODY>
</HTML>
I've got some fields with labels I've put into a table for layout purposes. There's a drop down selection which shows/hides rows in the table depending on the selection. My code is working just the way I want it in IE9, but in Chrome and Firefox, every time a row that was previously hidden is shown, the contents of the row are shifted way out of position.
There are several fields and multiple selections (which I've trimmed down in the code below), so I'm using a switch statement to tell it what to show and hide. How do I make Chrome and Firefox work like IE9 so that the row contents don't move around when they are displayed?
<HTML>
<HEAD>
</HEAD>
<BODY>
<FORM ACTION="#" name=form>
<select name="type" onchange="changeTable()">
<option value="A">A</option>
<option value="B">B</option>
</select>
<BR>
<table ID="options">
<tr>
<td>A, B, C, D</td>
<td><input type=text name="1" size=20 maxlength="20"></td>
</tr>
<tr ID = "A2">
<td>A</td>
<td><input type=text name="2" size=20 maxlength="20"></td>
</tr>
<tr>
<td>A, B, C, D</td>
<td><input type=text name="3" size=10 maxlength="10"></td>
</tr>
<tr ID="A4" style="display:none">
<td>B, D</td>
<td><input type=text name="4" size=10 maxlength="10"></td>
</tr>
<tr ID="A5">
<td>A</td>
<td><select name="5">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</td>
</tr>
<tr ID="A6" style="display:none">
<td>A</td>
<td><input type=text name="6" size=20></td>
</tr>
</table>
<script>
function changeTable(){
var type = document.form.type.value;
switch(type){
case "A":
document.getElementById("A2").style.display = 'block';
document.getElementById("A4").style.display = "none";
document.getElementById("A7").style.display = 'none';
document.getElementById("A8").style.display = 'none';
document.getElementById("A9").style.display = 'none';
document.getElementById("A5").style.display = "block";
break;
case "B":
document.getElementById("A2").style.display = 'none';
document.getElementById("A4").style.display = "block";
document.getElementById("A7").style.display = 'none';
document.getElementById("A8").style.display = 'none';
document.getElementById("A9").style.display = 'none';
document.getElementById("A5").style.display = "none";
document.getElementById("A6").style.display = "none";
break;
}
}
</script>
</BODY>
</HTML>
2 Answers
Reset to default 4First - you have a javascript error since elements "7" "8" and "9" are not in your html. second - setting display block to a 'tr' messed things up since his default is 'table-row' so just changed your code to set display to '' when you want to show them and it will fix your issues with chrome etc...
case "A":
document.getElementById("2").style.display = '';
document.getElementById("4").style.display = "none";
document.getElementById("5").style.display = "";
break;
case "B":
document.getElementById("2").style.display = 'none';
document.getElementById("4").style.display = "";
document.getElementById("5").style.display = "none";
document.getElementById("6").style.display = "none";
break;
ID cannot be just a number!
Please replace the number with alphabets
document.getElementById("2").style.display = 'block';
should be (example):
document.getElementById("abc").style.display = 'block';
or, may be
document.getElementById("a2").style.display = 'block';
Note: Chrome (WebKit-based browser) is extremely strict about incorrect HTML code. Therefore, I would highly remend to test your HTML (markup) using W3C Validator first before starting with JavaScript.
If this is HTML5, please add <!DOCTYPE html>