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

まず、要素「7」、「8」、「9」がHTMLに含まれていないため、JavaScriptエラーが発生します。2番目-デフォルトが「table-row」であるため、displayblockを「tr」に設定すると混乱します。表示したいときにdisplayを''に設定するようにコードを変更すると、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 に答える