便利eelife Java Script

   戻る

セルの表示、非表示を行います。



サンプルソース
<!--HTMLタグ </HEAD>の下に挿入してください。-->
<BODY >
<FORM name="myFORM">
<TABLE>
<TBODY>
<TR>
<TD width="120"><INPUT type="button" name="botan1" value="セル@非表示" onclick="Hide_obj('menu1')"></TD>
<TD width="120"><INPUT type="button" name="botan2" value="セルA非表示" onclick="Hide_obj('menu2')"></TD>
<TD width="120"><INPUT type="button" name="botan3" value="セルB非表示" onclick="Hide_obj('menu3')"></TD>
</TR>
</TBODY>
</TABLE>
</FORM>
<TABLE>
<TBODY>
<TR>
<TD id="menu1" bgcolor="#0000ff" width="120"><FONT color="#ffff00">セル@</FONT></TD>
<TD id="menu2" bgcolor="#ff0000" width="120"><FONT color="#00ffff">セルA</FONT></TD>
<TD id="menu3" bgcolor="#00ff00" width="120"><FONT color="#ff00ff">セルB</FONT></TD>
</TR>
</TBODY>
</TABLE>

</BODY>
<!--Javascript <HEAD>と</HEAD>の間に挿入してください。 -->
<SCRIPT language="JavaScript">
<!--eelife

flag="menu1";

function get_Browser(Lyid){   // ブラウザの取得
if (document.getElementById) myObj=document.getElementById(Lyid).style; // N6
else if (document.all) myObj=document.all[Lyid].style; // IE
else if (document.layers) myObj=document[Lyid]; // N4
}

function Hide_obj( Lyid ) {     // ボタンを押した時
get_Browser(Lyid);              // ブラウザオブジェクト
myObj.visibility ="hidden";    // 指定したセルを非表示
if( flag== Lyid){};        //同じボタンが押された時 何もしません
else
Show_obj(flag);     //違うボタンが押された時 非表示のセルを表示

flag= Lyid;
}

function Show_obj( Lyid )    // セルの表示
{
get_Browser(Lyid);                // ブラウザオブジェクト
myObj.visibility = "visible";   // 非表示のセルを表示
if( flag== Lyid){};
else
Hide_obj(flag);
flag= Lyid;
}

// -->
</SCRIPT>
コメント
各セルに付けた ID名 id="menu1"に拠って表示、非表示を実現しています。
IEの場合選択されたID名が"menu1"の時 myObj はdocument.all["menu1"].style になります。
myObj.visibility = "visible" で表示、myObj.visibility ="hidden" で非表示にします。