javascript - 隐藏 和子标签

Question

我想使用 <div> 隐藏表的某些字段-标签(见下文)。我的问题是调用了更改可见性的代码，但之后没有隐藏任何内容。

到目前为止我的代码在这里:

function checkType() {
    let typeElement = document.getElementById('storyboardType');
    let type = parseInt(typeElement.selectedIndex);
    if (type === TYPE_NONE || type === TYPE_GAME) {
        document.getElementsByClassName('storyboardUrlDiv').style.visibility = 'hidden';
        document.getElementById('storyboardSpeakerDiv').style.visibility = 'hidden';
        document.getElementById('storyboardAthmosphereDiv').style.visibility = 'hidden';
    } else if (type === TYPE_URL) {
        document.getElementById('storyboardUrlDiv').style.visibility = 'visible';
        document.getElementById('storyboardSpeakerDiv').style.visibility = 'hidden';
        document.getElementById('storyboardAthmosphereDiv').style.visibility = 'hidden';
    } else if (type === TYPE_SOUND ||  type === TYPE_VIDEO) {
        document.getElementById('storyboardUrlDiv').style.visibility = 'visible';
        document.getElementById('storyboardSpeakerDiv').style.visibility = 'visible';
        document.getElementById('storyboardAthmosphereDiv').style.visibility = 'visible';
    }
}

<table>
                <tbody>
                    <tr>
                        <div>
                            <td>OID</td>
                            <td>
                                <span id="storyboardOID"></span>/
                                <span id="storyboardIndex"></span>
                            </td>
                        </div>
                        <div id="storyboardGenreDiv">
                            <td>Genre</td>
                            <td>
                                <input id="storyboardGenre" type="text" size="20" onchange="saveAction();" />
                            </td>
                        </div>
                    </tr>
                    <tr>
                        <div>
                            <td>Ebene</td>
                            <td>
                                <span id="storyboardLayer"></span> ->
                                <select id="storyboardNextLayer" onchange="saveAction();">
                                    <option value="0">0</option>
                                </select>
                            </td>
                        </div>
                        <div id="storyboardAthmosphereDiv">
                            <td>Atmosphäre</td>
                            <td>
                                <input id="storyboardAthmosphere" type="text" size="20" onchange="saveAction();" />
                            </td>
                        </div>
                    </tr>

                    <tr>
                        <div>
                            <td>Typ</td>
                            <td>
                                <select id="storyboardType" onchange="changeType();">
                                    <option value="0">Sound</option>
                                    <option value="1">Video</option>
                                    <option value="2">Link</option>
                                    <option value="4">Spiel</option>
                                    <option value="5">Spiel+</option>
                                    <option value="6">Keiner</option>
                                </select>
                            </td>
                        </div>
                        <div id="storyboardSpeakerDiv">
                            <td>Sprecher</td>
                            <td>
                                <select id="storyboardSpeaker" onchange="saveAction();">
                                </select>
                            </td>
                        </div>
                    </tr>

                    <tr>
                        <div id="storyboardRulesDiv">
                            <td>Regel</td>
                            <td>
                                <select id="storyboardRules" onchange="changeRules();">
                                    <option value="0">Weiter</option>
                                    <option value="1">Stopp</option>
                                    <option value="2">Reset</option>
                                    <option value="3">Sprung</option>
                                    <option value="4">Transparent</option>
                                </select>

                            </td>
                        </div>
                        <div id="storyboardUrlDiv">
                            <td>File/URL</td>
                            <td>
                                <input id="storyboardUrl" type="text" size="20" onchange="saveAction();" />
                            </td>
                        </div>
                    </tr>

                    <tr>
                        <div id="storyboardPositionDiv">
                            <td>Position</td>
                            <td>
                                <input id="storyboardPosition" type="text" size="20" onchange="saveAction();" />
                            </td>
                        </div>
                        <div id="storyboardRandomSizeDiv">
                            <td>Zufallselemente</td>
                            <td>
                                <input id="storyboardRandomSize" type="number" size="10" onchange="saveAction();" />
                            </td>
                        </div>

                    </tr>
                    <tr>

                        <div id="storyboardRandomCountDiv">
                            <td>Auszuführen</td>
                            <td>
                                <input id="storyboardRandomCount" type="number" size="10" onchange="saveAction();" />
                            </td>
                        </div>
                    </tr>
                    <tr>
                        <div id="storyboardTextDiv">
                            <td>Text</td>
                            <td colspan="3">
                                <textarea id="storyboardText" rows=4 cols=60 onchange="saveAction();"></textarea>
                            </td>
                        </div>
                    </tr>
                </tbody>
            </table>

使用<div>有问题吗？在这里标记？

Answer 1

您的 HTML 无效。使用a validator .

div 不能是 <tr> 的子元素，错误恢复倾向于将此类 div 移至表格后面(将 <td> 元素留在后面)。

因此，单元格不再是 div 的子级，因此当您隐藏 div 时，不会产生可见的效果。

改为编写有效的 HTML。

如果您想定位一行中的部分单元格，但不是全部单元格，则必须单独定位它们。没有可用于对它们进行分组的标记。