S-JIS[2004-01-10/2005-04-23] 変更履歴
動的にHTMLを変えることが出来る。こういうのをDHTMLって言うのかな?
HTMLの途中で「document.write()」を使ってタグを書き出すことにより、HTMLを作り出す。
↓例↓
HTML:
<HTML> <HEAD> <SCRIPT language="JavaScript"> <!-- document.write("<TITLE>"); document.write("DHTMLのサンプル"); document.writeln("</TITLE>"); //--> </SCRIPT> </HEAD> <BODY> <TABLE BORDER="1"> <TR> <SCRIPT language="JavaScript"> <!-- for(var i=0; i<50; i++){ document.write("<TD>"); document.write(i + 1); document.writeln("</TD>"); } //--> </SCRIPT> </TR> </TABLE> </BODY> </HTML>
タグ内のHTMLを書き換えてやることにより、特定部分だけを変更することが出来る。[2005-04-23]
サンプル:クリックした時だけ一部を表示し、もう1度クリックしたら隠す
ここをクリックすると… |
function part_change(id){ var dst=document.getElementById(id+"_dst"); var src=document.getElementById(id+"_src"); if(dst.style.visibility != "visible"){ dst.style.visibility = "visible"; dst.innerHTML = src.innerHTML; }else{ dst.style.visibility = "hidden"; dst.innerHTML = " "; } }
<table border="1"> <tr> <td><a href="javascript:part_change('span_id')">ここをクリックすると…</a></td> <td><span id="span_id_dst"> </span> <span id="span_id_src" style="display:none"> <table border="1"> <tr><td>abc</td><td>123</td></tr> <tr><td>def</td><td>456</td></tr> </table> </span> </td> </tr> </table>
ブラウザ内部でデータを保持し、データに応じて画面を変えることが出来る。けっこう面倒だけど。
HTMLファイルを2つ用意し、片方をフレーム用、他方を表示プログラム用とする。
↓例↓
フレーム用HTML:
<HTML> <HEAD> <TITLE>DHTMLテスト</TITLE> </HEAD> <FRAMESET rows="1,*" border="0" frameSpacing="0" frameBorder="0"> <FRAME name="dprog" src="dhtml_test_main.html" noResize scrolling="no"/> <FRAME name="dbody"/> </FRAMESET> </HTML>
↑この例では、データ保持領域の名前をdprogとしている。この分のフレームは画面に表示されないように徹底的にパラメータを指定する。
画面表示をする為の領域の名前はdbodyとしている。
<HTML> <HEAD> <SCRIPT language="JavaScript"> <!-- var cell_count=1; //セル数 draw(); //初回表示 //HTML作成 function draw(){ with(parent.dbody){ //表示用フレームのドキュメントにHTMLを書き込む document.open(); document.writeln("<HTML><HEAD>"); document.writeln("<TITLE>DHTMLテスト(セル数:" + cell_count + ")</TITLE>"); document.writeln("</HEAD><BODY>"); document.writeln("<TABLE BORDER='1'><TR>"); for(var i=0;i<cell_count;i++){ document.write("<TD>"); document.write(i+1); document.writeln("</TD>"); } document.writeln("</TR></TABLE>"); document.writeln("<P><INPUT TYPE='BUTTON' VALUE='セルの個数を増やす' onClick='parent.dprog.inc()'></P>"); document.writeln("</BODY><HTML>"); document.close(); } } //ボタン押下時の動作 function inc(){ cell_count++; draw(); } //--> </SCRIPT> </HEAD> </HTML>
すなわち、プログラムはdprogフレームで実行され、dbodyフレームに出力している。ボタンはdbodyフレーム内にあるため、dprogフレーム内の関数にアクセスする為にはきちんとフレーム名を指定しなければならない。