2013-03-23 81 views
0

我有這樣的HTML代碼:表調心離開時,元素顯示

<html> 
    <head> 
     <script type="text/javascript"> 
      function showStuff(id) { 
       var e = document.getElementById(id); 
       if (e.style.display == 'block') e.style.display = 'none'; 
       else e.style.display = 'block'; 
      } 
     </script> 
    </head> 
    <body> 
     <FORM name=myForm> 
      <TABLE border=0 align=center> 
       <TBODY> 
        <TR> 
         <TD align=right>Quiz/Test Title:</TD> 
         <TD align=left> 
          <INPUT size=25 type=text name=t> 
         </TD> 
        </TR> 
        <TR> 
         <TD align=right> 
          <input type="button" value="Show/Hide" onclick="showStuff('multiplechoice')"> 
         </TD> 
        </TR> 
       </TBODY> 
       <TBODY id="multiplechoice" style="display: none;" align=center> 
        <TR> 
         <TD align=right> 
          <h3>Multiple Choice</h3> 
         </TD> 
         </TD> 
         <TR> 
          <TD align=right>Section Name:</TD> 
          <TD align=left> 
           <INPUT size=20 type=text name=section1> 
          </TD> 
         </TR> 
         <TR> 
          <TD align=right>Directions:</TD> 
          <TD align=left> 
           <INPUT size=71 type=text name=directions1> 
          </TD> 
         </TR> 
         <TR> 
          <TD align=right>Question Number:</TD> 
          <TD align=left> 
           <INPUT size=2 type=text name=n1 id=n1 value=1 onkeypress="return alpha(event,numbers)"> 
          </TD> 
         </TR> 
         <TR> 
          <TD align=right>Question:</TD> 
          <TD align=left> 
           <textarea rows=2 cols=55 name=q1 id=q1></textarea> 
          </TD> 
         </TR> 
         <TR> 
          <TD align=right>Answer A:</TD> 
          <TD align=left> 
           <INPUT size=35 type=text name=a1> 
          </TD> 
         </TR> 
         <TR> 
          <TD align=right>Answer B:</TD> 
          <TD align=left> 
           <INPUT size=35 type=text name=b1> 
          </TD> 
         </TR> 
         <TR> 
          <TD align=right>Answer C:</TD> 
          <TD align=left> 
           <INPUT size=35 type=text name=c1> 
          </TD> 
         </TR> 
         <TR> 
          <TD align=right>Answer D:</TD> 
          <TD align=left> 
           <INPUT size=35 type=text name=d1> 
          </TD> 
         </TR> 
         <TR> 
          <TD align=right>Answer (A,B,C,D):</TD> 
          <TD align=left> 
           <INPUT size=1 type=text name=correct1 onkeyup="upper(this)" onkeypress="return alpha(event,letters)" maxlength="1"> 
          </TD> 
         </TR> 
       </TBODY> 
      </TABLE> 
     </FORM> 
    </body> 
</html> 

確定這樣的問題是,當我點擊顯示/隱藏它顯示的形式,但它的形式交給左側移動的一切。我希望它保持中心的一致。無論如何要做到這一點?我忽略了所有其他與所有其他功能相關的功能,所以不要擔心它一切正常。任何幫助是極大的讚賞。

回答

1

你爲什麼不把你的兩個TBody分成單獨的表格?

類似如下:

<FORM name=myForm> 
<TABLE border=0 align=center> 
    <TBODY> 
     <TR> 
      <TD align=right>Quiz/Test Title:</TD> 
      <TD align=left> 
       <INPUT size=25 type=text name=t> 
      </TD> 
     </TR> 
     <TR> 
      <TD align=right><input type="button" value="Show/Hide" onclick="showStuff('multiplechoice')"> 
      </TD> 
     </TR> 
    </TBODY> 
</table> 
<table border=0 align=center> 
    <TBODY id="multiplechoice" style="display: none;" align=center> 
     <TR> 
      <TD align=right><h3>Multiple Choice</h3></TD> 
      </TR> 
     <TR> 
      <TD align=right>Section Name:</TD> 
      <TD align=left><INPUT size=20 type=text name=section1></TD> 
      </TR> 
     <TR> 
      <TD align=right>Directions:</TD> 
      <TD align=left><INPUT size=71 type=text name=directions1></TD> 
      </TR> 
     <TR> 
      <TD align=right>Question Number:</TD> 
      <TD align=left><INPUT size=2 type=text name=n1 id=n1 value=1 onkeypress="return alpha(event,numbers)"></TD> 
      </TR> 
     <TR> 
      <TD align=right>Question:</TD> 
      <TD align=left><textarea rows=2 cols=55 name=q1 id=q1></textarea></TD> 
      </TR> 
     <TR> 
      <TD align=right>Answer A:</TD> 
      <TD align=left><INPUT size=35 type=text name=a1></TD></TR> 
     <TR> 
      <TD align=right>Answer B:</TD> 
      <TD align=left><INPUT size=35 type=text name=b1></TD> 
      </TR> 
     <TR> 
      <TD align=right>Answer C:</TD> 
      <TD align=left><INPUT size=35 type=text name=c1></TD> 
      </TR> 
     <TR> 
      <TD align=right>Answer D:</TD> 
      <TD align=left><INPUT size=35 type=text name=d1></TD> 
      </TR> 
     <TR> 
      <TD align=right>Answer (A,B,C,D):</TD> 
      <TD align=left><INPUT size=1 type=text name=correct1 onkeyup="upper(this)" onkeypress="return alpha(event,letters)" maxlength="1"></TD> 
      </TR> 
    </TBODY> 
</TABLE> 
</FORM> 

它修復一切。看到這個working codepen