javascript - 带有隐藏 div 的 HTML 损坏格式

Question

我正在尝试将一个网络表单放在一起工作，在从下拉列表中进行选择后，正确的问题会被显示出来以供填写。我的表格可以正常工作，但是，我的格式完全不正常。我想做的是在显示问题时将所有内容保持在一条直线上，而与隐藏的文本没有任何间隙

当您运行程序时，您可以在下拉菜单和问题 49 和 50 之间看到一个空格（如果可能的话，我想消除那个差距），我还尝试隐藏整个div如果您选择“红色”它然后将问题分为 3 个部分。

我试图尽可能地减少代码。这是小提琴

<!-- Main Content Area -->
<div class="main">
  <div class="row">
        <form> <!-- Form tag is only used to allow the Clear button at the bottom to clear the data entry area. -->
            <!-- Begin left side data entry -->
            <div class="cell" style="vertical-align: top; padding-top: 10px;">
                <div class="row">
                    <div class="cell">Color:</div>
                    <div class="cell">
                        <select id="Color" onChange="myWorkLog();myWorkLogs();store_value('Color',this.value);showQuest(this.options[this.selectedIndex].value);"> 
                            <option label=" "></option>
                            <option >Blue</option>
                            <option >Red</option>
                            <option >Green</option>
                            <option >Orange</option>
                            <option >Yellow</option>
                        </select>
                    </div>  
                </div>
                <!--  Blue Questions -->
                    <div class="row">
                         <div class="cell" id="Q1" style="display:none" >Question 1 Question 6 Question </div>
                         <div class="cell"><input type="text" id="A1" style="display:none" onChange="myWorkLog();myWorkLogs();" /></div>
                    </div>
                    <div class="row">
                         <div class="cell" id="Q2" style="display:none">Question 2</div>
                         <div class="cell"><input type="text" id="A2" style="display:none" onChange="myWorkLog();myWorkLogs();" /></div>
                    </div>
                <!--  Reds Questions -->
                <div class="cell" id="Reds" style="display:none">
                    <div class="row">
                         <div class="cell" >Question 7 may be longer than the rest</div>
                         <div class="cell"><input type="text" id="Q7" onChange="myWorkLog();myWorkLogs();" /></div>
                    </div>
                    <div class="row">
                         <div class="cell" >Question 8</div>
                         <div class="cell"><input type="text" id="Q8" onChange="myWorkLog();myWorkLogs();" /></div>
                    </div>
                </div>
                    <!--  Green Questions -->
                    <div class="row">
                         <div class="cell" id="Q3" style="display:none">Question 3</div>
                         <div class="cell"><input type="text" id="A3" style="display:none" onChange="myWorkLog();myWorkLogs();" /></div>
                    </div>
                    <div class="row">
                         <div class="cell"id="Q4" style="display:none">Question 4</div>
                         <div class="cell"><input type="text" id="A4" style="display:none" onChange="myWorkLog();myWorkLogs();" /></div>
                    </div>
                    <!--  Orange Questions -->
                    <div class="row">
                         <div class="cell" id="Q5" style="display:none">Question 5</div>
                         <div class="cell"><input type="text" id="A5" style="display:none" onChange="myWorkLog();myWorkLogs();" /></div>
                    </div>
                    <div class="row">
                         <div class="cell" id="Q6" style="display:none">Question 6</div>
                         <div class="cell"><input type="text" id="A6" style="display:none" onChange="myWorkLog();myWorkLogs();" /></div>
                    </div>
                    <!--  Yellow Questions -->
                    <div class="row">
                         <div class="cell" id="Q9" style="display:none">Question 5</div>
                         <div class="cell"><input type="text" id="A9" style="display:none" onChange="myWorkLog();myWorkLogs();" /></div>
                    </div>
                    <div class="row">
                         <div class="cell" id="Q10" style="display:none">Question 6</div>
                         <div class="cell"><input type="text" id="A10" style="display:none" onChange="myWorkLog();myWorkLogs();" /></div>
                    </div>
                <!--  Always needed Questions -->
                <div class="row">
                    <div class="cell">Question 49</div>
                    <div class="cell"><input type="text" id="Q49" onChange="myWorkLog();myWorkLogs();" /></div>
                </div>
                <div class="row">
                    <div class="cell">Question 50</div>
                    <div class="cell"><input type="text" id="Q50" onChange="myWorkLog();myWorkLogs();" /></div>
                </div>
                <div class="row">
                    <div class="cell">&nbsp;</div>
                    <div class="cell" style="text-align: center;"><input type="reset" value="Clear" /></div>
                </div>
            </div>
        </form>
    </div>
</div>

JavaScript 取消隐藏

document.getElementById('Color').addEventListener('change', function() {

    var style = this.value == 'Blue' ? 'block' : 'none'
    document.getElementById('Q1').style.display = style;
    document.getElementById('Q2').style.display = style;
    document.getElementById('A1').style.display = style;
    document.getElementById('A2').style.display = style;


    var style = this.value == 'Red' ? 'block' : 'none'
        document.getElementById('Reds').style.display = style;

    var style = this.value == 'Green' ? 'block' : 'none'
    document.getElementById('Q3').style.display = style;
    document.getElementById('Q4').style.display = style;
    document.getElementById('A3').style.display = style;
    document.getElementById('A4').style.display = style;

    var style = this.value == 'Orange' ? 'block' : 'none'
    document.getElementById('Q5').style.display = style;
    document.getElementById('Q6').style.display = style;
    document.getElementById('A5').style.display = style;
    document.getElementById('A6').style.display = style;

    var style = this.value == 'Yellow' ? 'block' : 'none'
    document.getElementById('Q9').style.display = style;
    document.getElementById('Q10').style.display = style;
    document.getElementById('A9').style.display = style;
    document.getElementById('A10').style.display = style;
});

如果这对于我尝试构建它的方式是不可能的，我欢迎任何我可以研究以获得最终产品的建议。先感谢您。

标签： javascripthtml