附代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="json2.js"></script>
<style>
table,td{
border:1px solid gray;
}
</style>
<script>
var t=0;
var color_arr=['red','yellow','green','blue'];
var num
function initTable(){
$("#container").html('');
var table=$("<table></table>");
num=Math.pow(2,parseInt($("#txt_k").val()));
var width=document.body.clientWidth*0.4/num;
for(var i=0;i<num;i++){
var tr=$("<tr style='width:"+width*num+"px;height:"+width+"px;'></tr>");
for(var j=0;j<num;j++){
var td=$("<td style='width:"+width+"px;height:"+width+"px;'> </td>");
if(i==parseInt($("#txt_x").val())-1&&j==parseInt($("#txt_y").val())-1)
td.css("background-color","black");
tr.append(td);
}
table.append(tr);
}
$("#container").append(table);
}
function calcTable(){
var dr=parseInt($("#txt_x").val())-1;
var dc=parseInt($("#txt_y").val())-1;
chessBoard(0,0,dr,dc,num);
}
//tr tc子棋盘左上角坐标 dr dc特殊格子坐标 size子棋盘格子数
function chessBoard(tr,tc,dr,dc,size){
var s,t1;
if(size==1)
return;
t1=t++;
s=size/2;
var color=color_arr[t1%4];
//-------------左上角子棋盘-----------------
if(dr<tr+s&&dc<tc+s){
//特殊格子在右上角,递归处理子棋盘
chessBoard(tr,tc,dr,dc,s);
}else{
//处理右下角围绕分割点的棋盘
//标记特殊棋盘
$("table tr").eq(tr+s-1).find("td").eq(tc+s-1).css("background-color",color);
chessBoard(tr,tc,tr+s-1,tc+s-1,s);
}
//--------------右上角棋盘-------------------
if(dr>=tr+s&&dc<tc+s){
chessBoard(tr+s,tc,dr,dc,s);
}else{
//左下角格子
$("table tr").eq(tr+s).find("td").eq(tc+s-1).css("background-color",color);
chessBoard(tr+s,tc,tr+s,tc+s-1,s);
}
//--------------左下角棋盘-------------------
if(dr<tr+s&&dc>=tc+s){
chessBoard(tr,tc+s,dr,dc,s);
}else{
$("table tr").eq(tr+s-1).find("td").eq(tc+s).css("background-color",color);
chessBoard(tr,tc+s,tr+s-1,tc+s,s);
}
//--------------右下角棋盘-------------------
if(dr>=tr+s&&dc>=tc+s){
chessBoard(tr+s,tc+s,dr,dc,s);
}else{
//setTimeout("setColor("+tr+s+","+tc+s+",'"+color+"')",1000);
$("table tr").eq(tr+s).find("td").eq(tc+s).css("background-color",color);
chessBoard(tr+s,tc+s,tr+s,tc+s,s);
}
}
</script>
</HEAD>
<BODY style="text-align:center">
<div>
级数:
<input type="text" id="txt_k"/>
坐标X：
<input type="text" id="txt_x"/>
坐标Y:
<input type="text" id="txt_y"/>
<input type="button" id="btn" value="初始化表格" onclick="initTable()"/>
<input type="button" id="btn" value="开始棋盘覆盖" onclick="calcTable()"/>
</div>
<div id='container' style="margin:0 auto;">
</div>
</BODY>
</HTML>
版权声明：本文为博主原创文章，未经博主允许不得转载。
原文地址：http://blog.csdn.net/jrn1012/article/details/47837069
