便利eelife Java Script

   戻る


表示するテーブルを切り替えます。
テーブル@ テーブルA テーブルB テーブルC テーブルD
      



サンプルソース
<!--HTMLタグ </HEAD>の下に挿入してください。-->
<BODY >
<TABLE border="1">
<TBODY>
<TR>
<TD id="TBL1">テーブル@</TD>
<TD id="TBL2">テーブルA</TD>
<TD id="TBL3">テーブルB</TD>
<TD id="TBL4">テーブルC</TD>
<TD id="TBL5">テーブルD</TD>
</TR>
</TBODY>
</TABLE>
<FORM name="myFORM"><INPUT type="button" name="botan1" value="≪-" onclick="chg_tbl('back')">
<INPUT type="button" name="botan2" value="-≫" onclick="chg_tbl('go')"></FORM>

</BODY>
<!--Javascript <HEAD>と</HEAD>の間に挿入してください。 -->
<SCRIPT language="JavaScript">
<!--eelife
ID_suu=5;  // セルに付けたid の数です
flag="TBL1";
v=1;
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 Show_obj( Lyid )       // セルの表示
{
get_Browser(Lyid);              // ブラウザオブジェクト
myObj.visibility = "visible";  // 非表示のセルを表示
if( flag== Lyid){};
else
Hide_obj(flag);
flag= Lyid;
}


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

flag= Lyid;
}

function chg_tbl(flag1){

if(flag1=="go"){
v %= ID_suu;v++;
}
else{
if(v==1){v=ID_suu+1;}
v--;
}

Lyid = "TBL"+v;
Show_obj( Lyid )
}

// -->
</SCRIPT>
コメント
下記のスタイルシートを</HEAD>の上に挿入してください。
<STYLE type="text/css">
<!--
#TBL1{
width : 100px;
height : 100px;
top : 220px;
left : 420px;
position : absolute;
z-index : 1;
color : aqua;
background-color : red;
}
#TBL2{
width : 100px;
height : 100px;
top : 220px;
left : 420px;
position : absolute;
z-index : 2;
color : black;
background-color : lime;
visibility : hidden;
}
#TBL3{
width : 100px;
height : 100px;
top : 220px;
left : 420px;
position : absolute;
z-index : 3;
color : gray;
background-color : yellow;
visibility : hidden;
}
#TBL4{
width : 100px;
height : 100px;
top : 220px;
left : 420px;
position : absolute;
z-index : 4;
color : yellow;
background-color : blue;
visibility : hidden;
}
#TBL5{
width : 100px;
height : 100px;
top : 220px;
left : 420px;
position : absolute;
z-index : 5;
color : green;
background-color : fuchsia;
visibility : hidden;
}
-->
</STYLE>