wongplongo
New Member
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?\[code\]<HTML><HEAD></HEAD><BODY><FORM ACTION="#" name=form><select name="type" onchange="changeTable()"><option value="http://stackoverflow.com/questions/15536596/A">A</option><option value="http://stackoverflow.com/questions/15536596/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="http://stackoverflow.com/questions/15536596/0">0</option><option value="http://stackoverflow.com/questions/15536596/1">1</option><option value="http://stackoverflow.com/questions/15536596/2">2</option><option value="http://stackoverflow.com/questions/15536596/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> \[/code\]