白黒グリッド(7x7)

制作意図

はじめは、ライフゲームの説明のために作成したと記憶しています。その後フォントの説明や、図形のデジタル化に使いました。掲載にあたり、モバイル端末でも画面いっぱいになるようcssを書き足しました。vminを使うなどしていますが、IEでは9.0以降の対応のようです。もともとはtdにwidth:100px; height:100px;でやっていました。

プログラムなど

javascript

プログラムは単純です。classを変更するだけです。IE対策でsetAttribute("class","blk")の代わりにkoko.className = "blk"を使っています。後半のイベントハンドラを取り付ける部分ではsetAttribute()を使っていて一貫性がないのですが、たぶんtds[i].onclick=ではうまく行かなかったからでしよう。(過去の自分は他人です。) 授業ではLinux上でfirefoxを使っていたので、問題ないですが、公開した時の心配をしているわけです。

function changecolor(koko){
   var color = koko.getAttribute("class");

   if ( color=="wht" ) {
      koko.className = "blk";
   }else if (  color=="blk" ) {
      koko.className = "wht";
   }
}

window.onload = function(){
   setevent();
}
function setevent(){ 
    var tgtbl = document.getElementById("grid");
    var tds = tgtbl.getElementsByTagName("td");
    for (var i=0;tds.length>i;i++){
        tds[i].setAttribute("onclick","changecolor(this)");
    }
}

html

<div class="table">
<table id="grid">
<tr>
<td class="wht"><p></p></td>
<td class="wht"><p></p></td>
<td class="wht"><p></p></td>
<td class="wht"><p></p></td>
<td class="wht"><p></p></td>
<td class="wht"><p></p></td>
<td class="wht"><p></p></td>
</tr>
<tr>
<td class="wht"><p></p></td>
........

css

.table { 
  width: 100vmin;
}
#grid{
  margin:0 1%;
  border-collapse:collapse;
  width: 90%;
}
#grid td{
  min-width:40px;
  min-height:40px;
  border:solid 1px #ccc;
}
#grid td p{
   padding:0;
   margin:0;
   width: 100%;
}
#grid td p:before{
    content:"";
    display: block;
    padding-top: 100%;
}
.wht {background-color:#ffffff;}
.blk {background-color:#000000;}