[PR]ﾃﾚﾋﾞ番組表
今夜の番組ﾁｪｯｸ
目次

テーブルの表示・非表示の切り換え

DHTMLでテーブルを表示・非表示を切り換える場合注意が必要です。

表示・非表示を切り換えるスクリプト


  function showhide(id){
    if(document.getElementById){
      if(document.getElementById(id).style.display == "none")
        document.getElementById(id).style.display = "block";
      else
        document.getElementById(id).style.display = "none";
    }
  }

問題のあるテーブル

ここをクリックするとテーブルの表示非表示が切り替わります。
このテーブルは細い枠線です。
ネットスケープ6ではいったん非表示にしてから表示させると枠線の形状が変わってしまいます。		 

  <div>
  <a href"JavaScript:showhide('id1')">ここをクリックすると...省略...</div>
  </div>
  <table border cellspacing="0" id="id1">
    ...省略...
  </table>

改良後のテーブル

ここをクリックするとテーブルの表示非表示が切り替わります。
このテーブルは細い枠線です。
ネットスケープ6でも枠線の形状は変わりません。
tableタグにidを設定するのではなく、tableタグを挟むdivタグにidを設定しています。 

  <div>
  <a href="JavaScript:showhide('id2')">ここをクリックすると...省略...</div>
  </div>
  <div id="id2">
  <table border cellspacing="0">
    ...省略...
  </table>
  </div>

おまけ

ここをクリックするとテーブルの表示非表示が切り替わります。
１回目のクリックでは非表示になりません。
上のテーブルとはスクリプトが違います。そのスクリプトは下記の通りです。 

  function showhide0(id){
    if(document.getElementById){
      if(document.getElementById(id).style.display == "block")
        document.getElementById(id).style.display = "none";
      else
        document.getElementById(id).style.display = "block";
    }
  }

これ以降は、BBSの３３番の質問に答える形で2002/9/21に追加しました。

初期状態で非表示にする場合

Netscape 7.0 Preview Release 1とInternet Explorer 6で確認しました。古いバージョンのブラウザはすでにPCにはないので確認していません。

ここをクリックするとテーブルの表示非表示が切り替わります。 

  <div>
  <a href="JavaScript:showhide('id4')">ここをクリックすると...省略...</div>
  </div>
  <div id="id4" style="display:none;">
  <table border cellspacing="0">
    ...省略...
  </table>
  </div>

Opera 6.01ではdisplay属性の切り替えがうまくいきませんでした。visibility属性の切り替えはうまくいきました。

ここをクリックするとテーブルの表示非表示が切り替わります。 

  <div>
  <a href="JavaScript:toggleVisibility('id5')">ここをクリックすると...省略...</div>
  </div>
  <div id="id5" style="visibility:hidden;">
  <table border cellspacing="0">
    ...省略...
  </table>
  </div>
  
  // 呼び出しているスクリプト
  function toggleVisibility(id){
    if(document.getElementById){
      if(document.getElementById(id).style.visibility == "hidden")
        document.getElementById(id).style.visibility = "visible";
      else
        document.getElementById(id).style.visibility = "hidden";
    }
  }
▲上へ
目次