Web Developer's Room
HOME > DHTML講座 > ドキュメントを動的に変更する(4)     

ドキュメントを動的に変更する(4)

innerHTMLを使用した応用編です。
innerHTMLの生成を動的にすることで、より優れたページを作ることができます。

<html>
<body>

<script language="Javascript">
function Click_Sub1() {
  var inHTML="<table border=1>"
  for (i=0; i<100; i++)
    inHTML = inHTML + "<tr><td>サンプル" + i
  inHTML = inHTML + "</table>"
  document.all.div1.innerHTML=inHTML;
}
function Click_Sub2() {
  document.all.div1.innerHTML="<table border=1><tr><td>非表示</td></tr></table>";
}
</script>

<input type="button" onclick="Click_Sub1()" value="表示">
<input type="button" onclick="Click_Sub2()" value="非表示">
<div id=div1>初期状態です。</div>

</body>
</html>
【説明】
表示をクリックすると、div1を動的に変更します。
非表示をクリックすると、div1を動的に変更します。
Click_Sub1()の中で、innerHTMLへセットするHTMLを動的に生成しています。【i】を変更すると表示件数が変化します。

 サンプル

関連リンク
  • DHTMLとは
  • DHTMLの基本
  • DHTMLで使用できるイベント
  • ドキュメントを動的に変更する(1)
  • ドキュメントを動的に変更する(2)
  • ドキュメントを動的に変更する(3)




  • スポンサードリンク


    (C) Web Developer's Room All rights reserved.