我想使用<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';
}
}
&#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;
此处使用<div>
标记是否有问题?
答案 0 :(得分:2)
您的HTML无效。使用a validator。
div不能是<tr>
的子元素,错误恢复往往会将这些div移到表后面(将<td>
元素留在后面)。
因此,细胞不再是div的子元素,所以当你隐藏div时,没有明显的效果。
改为编写有效的HTML。
如果要定位一行中的某些(但不是全部)单元格,则必须单独定位它们。没有标记可用于对它们进行分组。