javascript - Show and hide rows in a table - things are getting shifted around -


I have some fields that I've put in a table for layout purposes, there is a drop down selection based on selection That shows / hides the rows on the table. My code is working the way I want it in IE9, but every time a row in Chrome and Firefox that was previously hidden is shown, the content of the line is transferred out of the position

There are many fields and many selections (which I have sorted in the code below), so I can tell you what I am using a switch statement to show and hide Chrome and Hayrfoks could work like IE9 am so not moving when the display line content?

  & lt; HTML & gt; & Lt; HEAD & gt; & Lt; / HEAD> & Lt; Body & gt; & Lt; Form ACTION = "#" name = form> & Lt; Select Name = "Type" onchange = "changeTable ()" & gt; & Lt; Option value = "A" & gt; A & lt; / Options & gt; & Lt; Option value = "b" & gt; B & lt; / Options & gt; & Lt; / Select & gt; & Lt; BR & gt; & Lt; Table ID = "Options" & gt; & Lt; TR & gt; & Lt; Td> A, B, C, D & lt; / Td> & Lt; Td> & Lt; Input type = name of text = "1" size = 20 maximum length = "20" & gt; & Lt; / Td> & Lt; / TR & gt; & Lt; Tr id = "A2" & gt; & Lt; TD & gt; & Lt; / TD & gt; & Lt; Td> & Lt; Input type = name of text = "2" size = 20 maximum length = "20" & gt; & Lt; / Td> & Lt; / TR & gt; & Lt; TR & gt; & Lt; Td> A, B, C, D & lt; / Td> & Lt; Td> & Lt; Input type = name of text = "3" size = 10 maximum length = "10" & gt; & Lt; / Td> & Lt; / TR & gt; & Lt; Tr id = "a4" style = "display: none" & gt; & Lt; Td> B, D & lt; / Td> & Lt; Td> & Lt; Input type = name of text = "4" size = 10 maximum length = "10" & gt; & Lt; / Td> & Lt; / TR & gt; & Lt; Tr id = "a5" & gt; & Lt; TD & gt; & Lt; / TD & gt; & Lt; Td> & Lt; Select name = "5" & gt; & Lt; Option value = "0" & ​​gt; 0 & lt; / Options & gt; & Lt; Option value = "1" & gt; 1 & lt; / Options & gt; & Lt; Option value = "2" & gt; 2 & lt; / Options & gt; & Lt; Option value = "3" & gt; 3 & lt; / Options & gt; & Lt; / Select & gt; & Lt; / TD & gt; & Lt; / TR & gt; & Lt; Tr id = "a6" style = "display: none" & gt; & Lt; TD & gt; & Lt; / TD & gt; & Lt; Td> & Lt; Input type = name of text = "6" size = 20> gt; & Lt; / Td> & Lt; / TR & gt; & Lt; / Table & gt; & Lt; Script & gt; Function ChangesTable () {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; }} & Lt; / Script & gt; & Lt; / Body & gt; & Lt; / Html & gt; First - you have Javascript error since element "7" and "8" "9" are not in your HTML, the second 'setting' block is the default 'table-row' after talking about 'TR' mess. , So you changed your code to set the display for '' only 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;    

Comments

Popular posts from this blog

excel vba - How to delete Solver(SOLVER.XLAM) code -

github - Teamcity & Git - PR merge builds - anyway to get HEAD commit hash? -

ios - Replace text in UITextView run slowly -