2

我有一些带有标签的字段，我已将它们放入表格中以进行布局。有一个下拉选择，根据选择显示/隐藏表中的行。我的代码在 IE9 中按我想要的方式工作，但在 Chrome 和 Firefox 中，每次显示以前隐藏的行时，该行的内容都会偏离位置。

有几个字段和多个选择项（我在下面的代码中进行了删减），所以我使用 switch 语句来告诉它要显示和隐藏什么。如何让 Chrome 和 Firefox 像 IE9 一样工作，以便行内容在显示时不会移动？

<HTML>
<HEAD>
</HEAD>
<BODY>
<FORM ACTION="#" name=form>
<select name="type" onchange="changeTable()">
<option value="A">A</option>
<option value="B">B</option>
</select>
<BR>
<table ID="options">
<tr>
<td>A, B, C, D</td>
<td><input type=text name="1" size=20 maxlength="20"></td>
</tr>
<tr ID = "A2">
<td>A</td>
<td><input type=text name="2" size=20 maxlength="20"></td>
</tr>
<tr>
<td>A, B, C, D</td>
<td><input type=text name="3" size=10 maxlength="10"></td>
</tr>
<tr ID="A4" style="display:none">
<td>B, D</td>
<td><input type=text name="4" size=10 maxlength="10"></td>
</tr>
<tr ID="A5">
<td>A</td>
<td><select name="5">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</td>
</tr>
<tr ID="A6" style="display:none">
<td>A</td>
<td><input type=text name="6" size=20></td>
</tr>
</table>

<script>
function changeTable(){
var type = document.form.type.value;

    switch(type){

case "A": 
    document.getElementById("A2").style.display = 'block';
    document.getElementById("A4").style.display = "none";   
    document.getElementById("A7").style.display = 'none';
    document.getElementById("A8").style.display = 'none';
    document.getElementById("A9").style.display = 'none';
    document.getElementById("A5").style.display = "block";  
    break;

case "B": 
    document.getElementById("A2").style.display = 'none';
    document.getElementById("A4").style.display = "block";
    document.getElementById("A7").style.display = 'none';
    document.getElementById("A8").style.display = 'none';
    document.getElementById("A9").style.display = 'none';
    document.getElementById("A5").style.display = "none";
    document.getElementById("A6").style.display = "none";
    break;
}
}
</script>
</BODY>
</HTML>
4

2 回答 2

4

首先-您有一个javascript错误，因为元素“7”“8”和“9”不在您的html中。第二 - 将显示块设置为“tr”，因为他的默认设置是“table-row”，所以只需更改代码以将显示设置为“”，当你想显示它们时，它会解决你的 chrome 等问题。 .

    case "A": 
    document.getElementById("2").style.display = '';
    document.getElementById("4").style.display = "none";    

    document.getElementById("5").style.display = "";   
    break;

case "B": 
    document.getElementById("2").style.display = 'none';
    document.getElementById("4").style.display = "";

    document.getElementById("5").style.display = "none";
    document.getElementById("6").style.display = "none";
    break;
于 2013-03-20T23:30:51.570 回答
2

ID不能只是一个数字！

请用字母替换数字

document.getElementById("2").style.display = 'block';

应该是（示例）：

document.getElementById("abc").style.display = 'block';

或者可能

document.getElementById("a2").style.display = 'block';

注意：Chrome（基于 WebKit 的浏览器）对不正确的 HTML 代码非常严格。因此，我强烈建议在开始使用 JavaScript 之前先使用W3C Validator测试您的 HTML（标记）。

如果这是 HTML5，请添加<!DOCTYPE html>

于 2013-03-20T23:26:25.897 回答