JavaScriptでカラーテーブルを作成します。
幅19、高さ12のテーブルを作成し、IDに"colorpicker"を指定します。
一番左端に、白～黒のグラデーションと、RGBCMYの６色を配置。<br>
２列目から、00 33 66 99 CC FFの組み合わせで色を作り、背景色を指定していきます。
<script type="text/javascript"><!--
document.write("<table border="1" id="colorpicker" style="border:#aaa 1px dotted;border-collapse:collapse;border-spacing:0px;padding:0px;"><tbody>\n");
for(var i=0;i<12;i++){
document.write("<tr>");
for(var j=0;j<19;j++){
document.write("<td style="width:10px;height:10px;"></td>");
}
document.write("</tr>\n");
}
document.write("</tbody></table>\n");
//--></script>
テーブルをHTMLタグで書いてもいいのですが、セルの個数が多いので、JavaScriptで一気に書き出します。
この時点でこのようなテーブルが作られます。
DOMを利用して、背景を指定していきます。
左上の6*6、中上の6*6、右上の6*6
左下の6*6、中下の6*6、右下の6*6
を１つのグループとして、その中の縦、横をそれぞれ３重ループさせます。
色の指定はあらかじめ
var ac=['ff','cc','99','66','33','00'];
として作成してあるので、ループカウンタを利用して取り出します。
var r=0,g=0,b=0;
var ac=['ff','cc','99','66','33','00'];
var row=0,col=1;
var tbl=document.getElementById("colorpicker");
var trs=tbl.getElementsByTagName("TR");
for (var i=0;i<2;i++){
row=i*6;
col=1;
for(r=i*3;r<3+i*3;r++){
for(g=0;g<6;g++){
for(b=0;b<6;b++){
trs[row].getElementsByTagName("TD")[col].style.backgroundColor="#"+ac[r]+ac[g]+ac[b];
row++;
}
col++;
row=i*6;
}
row=i*6;
col=6*(r%3+1)+1;
}
}
trs[0].getElementsByTagName("TD")[0].style.backgroundColor="#ffffff";
trs[1].getElementsByTagName("TD")[0].style.backgroundColor="#cccccc";
trs[2].getElementsByTagName("TD")[0].style.backgroundColor="#999999";
trs[3].getElementsByTagName("TD")[0].style.backgroundColor="#666666";
trs[4].getElementsByTagName("TD")[0].style.backgroundColor="#333333";
trs[5].getElementsByTagName("TD")[0].style.backgroundColor="#000000";
trs[6].getElementsByTagName("TD")[0].style.backgroundColor="#ff0000";
trs[7].getElementsByTagName("TD")[0].style.backgroundColor="#00ff00";
trs[8].getElementsByTagName("TD")[0].style.backgroundColor="#0000ff";
trs[9].getElementsByTagName("TD")[0].style.backgroundColor="#ffff00";
trs[10].getElementsByTagName("TD")[0].style.backgroundColor="#ff00ff";
trs[11].getElementsByTagName("TD")[0].style.backgroundColor="#00ffff";
この部分は、document.writeで書いた下の方に記述するか、functionなどにして、window.onloadや<body onload="">で呼び出します。
document.write()の部分でテーブルが作成される前に色を塗ろうとしても、エラーになります。