| ポイント |
<![CDATA[
function checkTable()
{
n = document.tblForm.tblSel.selectedIndex + 1;
if (n == oldNo) return;
for (i=1; i<=3; i++) document.all["tbl"+i].style.visibility = "hidden";
document.all["tbl"+n].style.visibility = "visible";
}
<body onLoad="setInterval('checkTable()',500)">
]]>
|
| 説 明 |
定期的に監視してセレクトメニューの番号に応じて表示する表を変えるには表にid属性で名前を指定、スタイルシートでvisibilityを指定しておきます。bodyタグのonLoadイベントが発生したらsetIntervalを使って定期的にセレクトメニュー番号をチェックする関数を呼び出します。チェックする関数では以前と同じ選択番号かどうか調べて同じであれば何もしないようにreturnを使って関数から抜けます。異なる番号の場合は、選択された番号に応じて表のスタイルプロパティであるvisibilityに"visible"を入れれば選択された番号の表が表示されます。 |
| サンプル |
<![CDATA[
<html>
<head>
<title>セレクトメニューで選択された表を表示する（定期的に監視）</title>
<style type="text/css"><!--
.tbl { position:absolute;top:80px;visibility:hidden;border:4px blue dashed; }
--></style>
<script Language="JavaScript"><!--
oldNo = -1;
function checkTable()
{
n = document.tblForm.tblSel.selectedIndex + 1;
if (n == oldNo) return;
for (i=1; i<=3; i++) document.all["tbl"+i].style.visibility = "hidden";
document.all["tbl"+n].style.visibility = "visible";
}
// --></script>
</head>
<body onLoad="setInterval('checkTable()',500)">
<form name="tblForm">
<select name="tblSel">
<option>表１
<option>表２
<option>表３
</select>
</form>
<table id="tbl1" class="tbl"><tr><th>表１</th></tr></table>
<table id="tbl2" class="tbl"><tr><th>表２</th></tr></table>
<table id="tbl3" class="tbl"><tr><th>表３</th></tr></table>
</body>
</html>
]]>
|
| 補足説明 |
なし |
|
■サンプルスクリプトを実行する >>実行
■各ブラウザでの動作結果を見る >>View!
|
セレクトメニューで選択された表を表示する（定期的に監視）