白黒グリッド(選択可変)

制作意図

フォントの説明、図形のデジタル化の説明、ライフゲームの説明などに使う正方形グリッドです。各セルのクリックで白黒反転します。白黒グリッド(7x7)では数は固定でしたが、目的に応じて数を選択できるようにしました。数を変更するにあたり、要素もjavascriptで作ることにしました。cssで、min-width:40px; min-height:40px;としている関係で数が大きくなるとはみ出します。これがないと各セルの幅が揃わない様です。

プログラムなど

javascript

前半は白黒グリッド(7x7)と同じです。classを変更するだけです。

後半はdivタグの位置にappendChildでtableを作ります。正方形にするためのpタグも作って入れます。イベントハンドラも取り付けるます。classの初期値も入れます。

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

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

function settable(n){ 
   var waku = document.getElementById("waku");
   var tblElem =  document.createElement("table");
   waku.appendChild(tblElem);
   for (var i=0;n>i;i++){
      var trElem = document.createElement("tr");
      tblElem.appendChild(trElem);
      for (var j=0;n>j;j++){
         var pElem = document.createElement("p");
         var tdElem = document.createElement("td");
         tdElem.setAttribute("onclick","changecolor(this)");
         tdElem.setAttribute("class","wht");
         tdElem.appendChild(pElem);
         trElem.appendChild(tdElem);
      }
   }
   var butt = document.getElementById("button");
   butt.setAttribute("style","display:none;");
}

html

<div id="button">
<p>選んでください</p>
<p><button type="button" onclick="settable(4)">4</button> </p>
<p><button type="button" onclick="settable(8)">8</button> </p>
<p><button type="button" onclick="settable(12)">12</button> </p>
.....略....
</div>
<div class="table" id="waku">
<div>

css

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