モリパパ moripapa

WordPressから、徒然なるままに…

Java Script 勉強中(2)

ひとつ征服したJavaScriptです。ちょっと嬉しくなって、紹介しちゃいます。
「詳しいこと見たけりゃ、お見せしましょう。チェック入れてよ! 一発公開!」ってなプログラムです。

HTMLのTableの中で、class名を'swDisp'として"span"で括った文字を、チェックボックス「On」で、一発表示する仕掛けです。
(class名の'swDisp'は任意ですが、以下のJavaScriptに記述してるので・・・)

まず、チェックボックスにチェックを入れると、JavaScriptの関数「changeCell()」が実行されるようにチェックボックスを配置しておきます。「onclick="changeCell();"」としておくわけですね。

そして、JavaScriptの関数「changeCell()」は、「getElementsByTagName」を使って、以下のように書きました。

function changeCell(){
 if(document.form1.check_type.checked == true){
  var e = document.getElementsByTagName("span");
  for (var i = 0; i < e.length ; i++){
   if(e[i].className == 'swDisp'){
   e[i].style.display = ' ';
   }
  }
 } else {
  var e = document.getElementsByTagName("span");
  for (var i = 0; i < e.length; i++){
   if(e[i].className == 'swDisp'){
    e[i].style.display = 'none';
   }
  }
 }
}

チョット解説すると、checkedの時は、"span"のTagNameで、classNameが'swDisp'ならば、「' '」でそのまま表示し、配列の回数分だけ繰り返す。そうじゃない時は「'none'」にして表示させないよう(隠します)、これも配列の回数分繰り返します。

実は、このままだと読み込み時に「関数"changeCell()"」が、まだ実行されてないので、隠しておく文字が表示されてしまいます。読み込み時、隠せなければバレバレで意味ないですよね!

そこで読み込み(オンロード)時に「関数"changeCell()"」を実行させて、display = 'none'の状態にしておかないといけません。【チェックボックスはcheckedでない状態の設定が前提です】
これで読み込んだ時、隠したい文字が非表示になります。具体的に、HTMLに書いておく内容は次のとおりです。
「」です。 たったこれだけのこと、簡単ですね!

これで読み込み時には非表示'none'となり、チェックボックスにチェックを入れると、隠していた文字が表示されると言うわけです。悪戦苦闘してたけど、コロンブスの卵で、出来てしまうと意外に簡単でした。ホッ!!

<追記>
この具体例を、以下のHPで確認してください。ページ最下段のTableに記載しました。
http://www7b.biglobe.ne.jp/~a_k_takayama/tayousei.html
(高山憲二のホームページ「多様性の国インド」の"中国との比較"のTable