JavaScriptを使用したdisplayプロパティの実装メモ

メモ

出向先で実装するように言われたので実装しました。
JavaScriptを使用したdisplay のメモです。div と tr で若干違うのでメモ。
Webページの一部を折りたたんで表示する際に、JavaScriptで要素のdisplayプロパティを書き換えることがよく行われます。divなどのブロックレベル要素の場合、「要素.style.display = 'none';」でその要素が非表示になり、「要素.style.display = 'block';」で表示されます。ところが、この手法を使って、表のある行（tr要素）の表示／非表示を切り替えようとしたところInternet Explorerでは希望通りの動作になりましたが、その他のブラウザでは表が崩れてしまうようですのでその対応メモ。

div のdisplay

<select name="Goods" onchange="chkSelect();">
    <option value="hoge" >ほげ</option>
    <option value="piyo" >ぴよ</option>
    <option value="fuga" >ふが</option>
</select>

<div style="display: block;" id="default">
でふぉると
</div>

<div style="display: none;" id="hoge">
ほげ
</div>

<div style="display: none;" id="piyo">
ぴよ
</div>

<div style="display: none;" id="fuga">
ふが
</div>

イベントドリブン箇所

function chkSelect() {
    $val = $("select[name='Goods']").val();

    if($val == 'hoge'){
        document.getElementById("hoge").style.display="block";
    }else {
        document.getElementById("hoge").style.display="none";
    }

    if($val == 'piyo'){
        document.getElementById("piyo").style.display="block";
    }else {
        document.getElementById("piyo").style.display="none";
    }

    if($val == 'fuga'){
        document.getElementById("fuga").style.display="block";
    }else {
        document.getElementById("fuga").style.display="none";
    }
}

テーブル箇所メモ

HTML 4.0やXHTML 1.0等では、tr要素はブロックレベル要素には含まれていないため"block"ではなく代替として''を使用することになります。Internet Explorerだけ例外なのはInternet Explorerオレオレ仕様だからだそうです。

tr のdisplay

<table>
    <tr id="default" style="">
        <td>でふぉると</td>
    </tr>

    <tr id="toggle_row_1" style="display: none;">
        <td>ほげ</td>
    </tr>
    <tr id="toggle_row_2" style="display: none;">
        <td>ふが</td>
    </tr>
    <tr id="toggle_row_3" style="display: none;">
        <td>ぴよ</td>
    </tr>
</table>

<input id="" name="" type="button" value="項目を追加する" onclick="return toggle_row();">

イベントドリブン箇所

var cnt = '1';

function toggle_row() {
    var obj1 = document.getElementById('toggle_row_1');
    var obj2 = document.getElementById('toggle_row_2');
    var obj3 = document.getElementById('toggle_row_3');

    if(cnt == '1'){ obj1.style.display = '';}
    if(cnt == '2'){ obj2.style.display = '';}
    if(cnt == '3'){ obj3.style.display = '';}

    cnt++;
    return false;
}