Question

我有这个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>

好的问题是，当我点击显示/隐藏它显示表单时，它会将表单中的所有内容移到左侧。我希望它能在中心保持一致。反正有没有这样做？我遗漏了与其他所有内容相关的所有其他功能，所以不要担心这一切都有效。非常感谢任何帮助。

Answer 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

当元素显示时，表格左对齐

1 个答案: