隐藏<div>和子标签

时间:2017-11-06 10:40:38

标签: javascript html

我想使用<div>标记隐藏表格的某些字段(参见下文)。我的问题是调用可见性的代码被调用,但之后没有任何东西被隐藏。

我的代码到目前为止:

&#13;
&#13;
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';
    }
}
&#13;
<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>
&#13;
&#13;
&#13;

此处使用<div>标记是否有问题?

1 个答案:

答案 0 :(得分:2)

您的HTML无效。使用a validator

div不能是<tr>的子元素,错误恢复往往会将这些div移到表后面(将<td>元素留在后面)。

因此,细胞不再是div的子元素,所以当你隐藏div时,没有明显的效果。

改为编写有效的HTML。

如果要定位一行中的某些(但不是全部)单元格,则必须单独定位它们。没有标记可用于对它们进行分组。