利用JavaScript代码实现的圆角表格

圆角表格1代码：

<html>

<head>

function rtLoad(m,w,h,tl,tr,bl,br,lp,tp,tbk,bbk,bd,pd,bg,c,s,overact,outact)

{

var rtHTML=null;

switch(m)

{

case 1:

wt=w-2;ht=h-2;

var rtWArray=new Array(1,wt,1);

var rtHArray=new Array(1,ht,1);

break;

case 2:

wt=w-4;ht=h-4;

var rtWArray=new Array(1,1,wt,1,1);

var rtHArray=new Array(1,1,ht,1,1);

break;

case 3:

wt=w-8;ht=h-8;

var rtWArray=new Array(1,1,2,wt,2,1,1);

var rtHArray=new Array(1,1,2,ht,2,1,1);

break;

case 4:

wt=w-10;ht=h-10;

var rtWArray=new Array(1,1,1,2,wt,2,1,1,1);

var rtHArray=new Array(1,1,1,2,ht,2,1,1,1);

break;

case 5:

wt=w-14;ht=h-14;

var rtWArray=new Array(1,1,1,2,2,wt,2,2,1,1,1);

var rtHArray=new Array(1,1,1,2,2,ht,2,2,1,1,1);

break;

case 6:

wt=w-12;ht=h-12;

var rtWArray=new Array(1,1,1,1,1,1,wt,1,1,1,1,1,1);

var rtHArray=new Array(1,1,1,1,1,1,ht,1,1,1,1,1,1);

break;

default:

wt=w-8;ht=h-8;

var rtWArray=new Array(1,1,2,wt,2,1,1);

var rtHArray=new Array(1,1,2,ht,2,1,1);

break;

}

if(rtWArray&&rtHArray)

{

var rtM=rtWArray.length-rtWArray.length%2;

var rtN=rtM/2;

}

if(rtWArray&&rtHArray&&rtM&&rtN)

{

if(c.outerHTML)

{

c.style.display="";

var cont=c.outerHTML;

c.outerHTML="";

}

else

{

var cont=c;

}

if(!pd)pd="0px";

rtHTML="<div style=\"width:" + w + ";height:" + h + ";cursor:default;" + s + "\" onmouseover=\"" + overact + "\" onmouseout=\"" + outact + "\"><table border=\"0\" cellpadding=\"0\" cellspacing=\"0\">\n";

for(i=0;i<=rtM;i++)

{

rtHTML+="<tr>\n";

for(j=0;j<=rtM;j++)

{

rtHTML+="<td width=\"" + rtWArray[j] +"\" height=\"" + rtHArray[i] +"\"";

if(i>=rtN)

{

m=0+(i-rtN);

n=rtM-(i-rtN);

}

else

{

m=0+(rtN-i);

n=rtM-(rtN-i);

}

if(i<rtN&&j<rtN)//检验左上角

{

if(tl)

{

if(j==m||j==n)

{

rtHTML+=" bgcolor=\"" + bd + "\"";

}

if(j>m&&j<n)

{

rtHTML+=" bgcolor=\"" + bg + "\"";

}

else

{

if(i==0||j==0)

{

rtHTML+=" bgcolor=\"" + bd + "\"";

}

else

{

rtHTML+=" bgcolor=\"" + bg + "\"";

}

if(i<rtN&&j>rtN)//检验右上角

{

if(tr)

{

if(j==m||j==n)

{

rtHTML+=" bgcolor=\"" + bd + "\"";

}

if(j>m&&j<n)

{

rtHTML+=" bgcolor=\"" + bg + "\"";

}

else

{

if(i==0||j==rtM)

{

rtHTML+=" bgcolor=\"" + bd + "\"";

}

else

{

rtHTML+=" bgcolor=\"" + bg + "\"";

}

if(i>rtN&&j<rtN)//检验左下角

{

if(bl)

{

if(j==m||j==n)

{

rtHTML+=" bgcolor=\"" + bd + "\"";

}

if(j>m&&j<n)

{

rtHTML+=" bgcolor=\"" + bg + "\"";

}

else

{

if(i==rtM||j==0)

{

rtHTML+=" bgcolor=\"" + bd + "\"";

}

else

{

rtHTML+=" bgcolor=\"" + bg + "\"";

}

if(i>rtN&&j>rtN)//检验右下角

{

if(br)

{

if(j==m||j==n)

{

rtHTML+=" bgcolor=\"" + bd + "\"";

}

if(j>m&&j<n)

{

rtHTML+=" bgcolor=\"" + bg + "\"";

}

else

{

if(i==rtM||j==rtM)

{

rtHTML+=" bgcolor=\"" + bd + "\"";

}

else

{

rtHTML+=" bgcolor=\"" + bg + "\"";

}

if(i==rtN&&j==rtN)

rtHTML+=" align=\"" + lp + "\" valign=\"" + tp + "\" bgcolor=\"" + bg + "\" style=\"padding:" + pd + "\">" + cont + "</td>\n";

else if((i==rtN&&j==0)||(i==0&&j==rtN)||(i==rtN&&j==rtM)||(i==rtM&&j==rtN))

rtHTML+=" bgcolor=\"" + bd + "\"></td>\n";

else if((i==rtN&&j<rtN)||(i==rtN&&j>rtN)||(i<rtN&&j==rtN)||(i>rtN&&j==rtN))

rtHTML+=" bgcolor=\"" + bg + "\"></td>\n";

else

{

if(i<rtN)

rtHTML+=" bgcolor=\"" + tbk + "\"></td>\n";

else

rtHTML+=" bgcolor=\"" + bbk + "\"></td>\n";

}

rtHTML+="</tr>\n";

}

rtHTML+="</table></div>";

return rtHTML;

}

var response = {

write : function() { document.write(arguments[0]) }

}

function check_mouse()

{

tn=event.srcElement.tagName;

if(tn!='INPUT'&&tn!='TEXTAREA')

return false;

}

document.onselectstart=new Function("tn=event.srcElement.tagName;if(tn!='INPUT'&&tn!='TEXTAREA')return false;");

</script>

<style>

<!--

table { font-size:11px;font-family:Tahoma }

input { font-size:11px;font-family:Tahoma;border:0px;background-color:transparent;width:170px;height:15px;color:#4F7900 }

-->

</style>

<tr>

<span id="headt" style="color:#247C1B;">You must have administrative access to successfully log into the Eastpower Board Administration CP.<BR>

Please enter your administrator username and password below.</span>

<span style="color: #36B02D" id="middt"><font style="font-size: 13px;"><b>Verification Required</b></font>

<tr>

<td width="154" height="22">Your Administrator Username:</td>

</tr>

<tr>

<td width="154" height="22">Your Administrator Password:</td>

</tr>

<tr>

</tr>

</table></span>

// 0背景变色 1标题字色 2外框色 3内框色 4内字色 5外框底色 6上内框底色 7下内框底色

var color=new Array("","#217118","#247C1B","#2F9726","#36B02D","#BCECB7","#E3F7E1","#F2FBF2","#FFFFFF");

//var color=new Array("#52D342","#315100","#426D00","#529200","#6BA600","#A5FF00","#C6FF63","#E7FFBD","#FFFFFF");

tmp="<span style=\"width:380px;height:15px;text-align:left;padding-left:1px;font-size:12px;font-family:helvetica;color:" + color[1] + "\"><b>Welcome to the Eastpower Board Administration CP</b></span><br>"

+rtLoad(3,382,43,true,true,false,false,"left","middle","","",color[3],2,color[6],headt,"","","")

+rtLoad(3,382,110,false,false,false,false,"left","top","","",color[7],2,color[7],middt,"border:1px solid "+color[3]+";border-top:0px;","","")

+"<span style=\"width:71px;height:18px;text-align:left;font-size:12px;font-family:Arial;color:#3169A5;padding-top:3px\">"

+rtLoad(2,59,18,true,true,true,true,"center","middle",color[5],color[5],color[4],0,"","<u>H</u>ome","background-color:"+color[7],"this.style.backgroundColor='"+color[8]+"';","this.style.backgroundColor='"+color[7]+"';")

+"</span>"

+"<span style=\"width:238px;height:18px;text-align:right;font-size:12px;font-family:Arial;color:#3169A5;padding-top:3px\">"

+rtLoad(2,59,18,true,true,true,true,"center","middle",color[5],color[5],color[4],0,"","<u>O</u>k","background-color:"+color[7],"this.style.backgroundColor='"+color[8]+"';","this.style.backgroundColor='"+color[7]+"';")

+"</span>"

+"<span style=\"width:71px;height:18px;text-align:right;font-size:12px;font-family:Arial;color:#3169A5;padding-top:3px\">"

+rtLoad(2,59,18,true,true,true,true,"center","middle",color[5],color[5],color[4],0,"","<u>C</u>ancel","background-color:"+color[7],"this.style.backgroundColor='"+color[8]+"';","this.style.backgroundColor='"+color[7]+"';")

+"</span>";

//tmp2=rtLoad(4,400,212,true,true,true,true,"center","middle","","","#A8AAA8",0,"#D6D7D6",tmp,"","","");

response.write(rtLoad(4,400,212,true,true,true,true,"center","middle",color[8],color[8],color[2],0,color[5],tmp,"","",""));

//response.write("<br>"+rtLoad(4,400,212,true,true,true,true,"center","middle","","","#A8AAA8",0,"#DEE7EF",tmp,"","",""));

idname_t.innerHTML=rtLoad(2,190,17,true,true,true,true,"center","middle","","",color[4],0,"","<input type=\"text\" name=\"idname\" size=\"20\">","background-color:"+color[7],"this.style.backgroundColor='"+color[8]+"';","this.style.backgroundColor='"+color[7]+"';");

passwd_t.innerHTML=rtLoad(2,190,17,true,true,true,true,"center","middle","","",color[4],0,"","<input type=\"password\" name=\"passwd\" size=\"20\">","background-color:"+color[7],"this.style.backgroundColor='"+color[8]+"';","this.style.backgroundColor='"+color[7]+"';");

</script></td>

</tr>

</table>

</div>

</body>

</html>

圆角表格2代码：

<html>

<head>

function rtLoad(m,w,h,tl,tr,bl,br,lp,tp,tbk,bbk,bd,pd,bg,c,s,overact,outact)

{

var rtHTML=null;

switch(m)

{

case 1:

wt=w-2;ht=h-2;

var rtWArray=new Array(1,wt,1);

var rtHArray=new Array(1,ht,1);

break;

case 2:

wt=w-4;ht=h-4;

var rtWArray=new Array(1,1,wt,1,1);

var rtHArray=new Array(1,1,ht,1,1);

break;

case 3:

wt=w-8;ht=h-8;

var rtWArray=new Array(1,1,2,wt,2,1,1);

var rtHArray=new Array(1,1,2,ht,2,1,1);

break;

case 4:

wt=w-10;ht=h-10;

var rtWArray=new Array(1,1,1,2,wt,2,1,1,1);

var rtHArray=new Array(1,1,1,2,ht,2,1,1,1);

break;

case 5:

wt=w-14;ht=h-14;

var rtWArray=new Array(1,1,1,2,2,wt,2,2,1,1,1);

var rtHArray=new Array(1,1,1,2,2,ht,2,2,1,1,1);

break;

case 6:

wt=w-12;ht=h-12;

var rtWArray=new Array(1,1,1,1,1,1,wt,1,1,1,1,1,1);

var rtHArray=new Array(1,1,1,1,1,1,ht,1,1,1,1,1,1);

break;

default:

wt=w-8;ht=h-8;

var rtWArray=new Array(1,1,2,wt,2,1,1);

var rtHArray=new Array(1,1,2,ht,2,1,1);

break;

}

if(rtWArray&&rtHArray)

{

var rtM=rtWArray.length-rtWArray.length%2;

var rtN=rtM/2;

}

if(rtWArray&&rtHArray&&rtM&&rtN)

{

if(c.outerHTML)

{

c.style.display="";

var cont=c.outerHTML;

c.outerHTML="";

}

else

{

var cont=c;

}

if(!pd)pd="0px";

for(i=0;i<=rtM;i++)

{

rtHTML+="<tr>\n";

for(j=0;j<=rtM;j++)

{

rtHTML+="<td width=\"" + rtWArray[j] +"\" height=\"" + rtHArray[i] +"\"";

if(i>=rtN)

{

m=0+(i-rtN);

n=rtM-(i-rtN);

}

else

{

m=0+(rtN-i);

n=rtM-(rtN-i);

}

if(i<rtN&&j<rtN)//检验左上角

{

if(tl)

{

if(j==m||j==n)

{

rtHTML+=" bgcolor=\"" + bd + "\"";

}

if(j>m&&j<n)

{

rtHTML+=" bgcolor=\"" + bg + "\"";

}

else

{

if(i==0||j==0)

{

rtHTML+=" bgcolor=\"" + bd + "\"";

}

else

{

rtHTML+=" bgcolor=\"" + bg + "\"";

}

if(i<rtN&&j>rtN)//检验右上角

{

if(tr)

{

if(j==m||j==n)

{

rtHTML+=" bgcolor=\"" + bd + "\"";

}

if(j>m&&j<n)

{

rtHTML+=" bgcolor=\"" + bg + "\"";

}

else

{

if(i==0||j==rtM)

{

rtHTML+=" bgcolor=\"" + bd + "\"";

}

else

{

rtHTML+=" bgcolor=\"" + bg + "\"";

}

if(i>rtN&&j<rtN)//检验左下角

{

if(bl)

{

if(j==m||j==n)

{

rtHTML+=" bgcolor=\"" + bd + "\"";

}

if(j>m&&j<n)

{

rtHTML+=" bgcolor=\"" + bg + "\"";

}

else

{

if(i==rtM||j==0)

{

rtHTML+=" bgcolor=\"" + bd + "\"";

}

else

{

rtHTML+=" bgcolor=\"" + bg + "\"";

}

if(i>rtN&&j>rtN)//检验右下角

{

if(br)

{

if(j==m||j==n)

{

rtHTML+=" bgcolor=\"" + bd + "\"";

}

if(j>m&&j<n)

{

rtHTML+=" bgcolor=\"" + bg + "\"";

}

else

{

if(i==rtM||j==rtM)

{

rtHTML+=" bgcolor=\"" + bd + "\"";

}

else

{

rtHTML+=" bgcolor=\"" + bg + "\"";

}

if(i==rtN&&j==rtN)

rtHTML+=" align=\"" + lp + "\" valign=\"" + tp + "\" bgcolor=\"" + bg + "\" style=\"padding:" + pd + "\">" + cont + "</td>\n";

else if((i==rtN&&j==0)||(i==0&&j==rtN)||(i==rtN&&j==rtM)||(i==rtM&&j==rtN))

rtHTML+=" bgcolor=\"" + bd + "\"></td>\n";

else if((i==rtN&&j<rtN)||(i==rtN&&j>rtN)||(i<rtN&&j==rtN)||(i>rtN&&j==rtN))

rtHTML+=" bgcolor=\"" + bg + "\"></td>\n";

else

{

if(i<rtN)

rtHTML+=" bgcolor=\"" + tbk + "\"></td>\n";

else

rtHTML+=" bgcolor=\"" + bbk + "\"></td>\n";

}

rtHTML+="</tr>\n";

}

rtHTML+="</table></div>";

return rtHTML;

}

var response = {

write : function() { document.write(arguments[0]) }

}

function check_mouse()

{

tn=event.srcElement.tagName;

if(tn!='INPUT'&&tn!='TEXTAREA')

return false;

}

document.onselectstart=new Function("tn=event.srcElement.tagName;if(tn!='INPUT'&&tn!='TEXTAREA')return false;");

</script>

<style>

<!--

table { font-size:11px;font-family:Tahoma }

input { font-size:11px;font-family:Tahoma;border:0px solid #737173;width:170px;height:15px;color:#ff0000 }

-->

</style>

</head>

<tr>

<span id="headt" style="color:#333333;">You must have administrative access to successfully log into the Eastpower Board Administration CP.<BR>

Please enter your administrator username and password below.</span>

<span style="color: #737173" id="middt"><font style="font-size: 13px;"><b>Verification Required</b></font>

<tr>

<td width="154" height="22">Your Administrator Username:</td>

</tr>

<tr>

<td width="154" height="22">Your Administrator Password:</td>

</tr>

<tr>

</tr>

</table></span>

tmp="<span style=\"width:380px;height:15px;text-align:left;padding-left:1px;font-size:12px;font-family:helvetica;color:#3169A5\"><b>Welcome to the Eastpower Board Administration CP</b></span><br>"

+rtLoad(3,382,43,true,true,false,false,"left","middle","","","#737173",2,"#FFFFEE",headt,"","","")

+rtLoad(3,382,110,false,false,false,false,"left","top","","","#FFFFFF",2,"#FFFFFF",middt,"border-left:1px solid #737173;border-right:1px solid #737173;border-bottom:1px solid #737173;","","")

+"<span style=\"width:74px;height:18px;text-align:left;font-size:12px;font-family:Arial;color:#3169A5;padding-top:3px\">"

+rtLoad(2,59,18,true,true,true,true,"center","middle","#D6D7D6","#D6D7D6","",0,"#E7E7E7","<u>H</u>ome","background-color:#BFBDBF","this.style.backgroundColor='#737173';","this.style.backgroundColor='#BFBDBF';")

+"</span>"

+"<span style=\"width:238px;height:18px;text-align:right;font-size:12px;font-family:Arial;color:#3169A5;padding-top:3px\">"

+rtLoad(2,59,18,true,true,true,true,"center","middle","#D6D7D6","#D6D7D6","#737173",0,"","<u>O</u>k","background-color:#E7E7E7","this.style.backgroundColor='#FFFFFF';","this.style.backgroundColor='#E7E7E7';")

+"</span>"

+"<span style=\"width:71px;height:18px;text-align:right;font-size:12px;font-family:Arial;color:#3169A5;padding-top:3px\">"

+rtLoad(2,59,18,true,true,true,true,"center","middle","#D6D7D6","#D6D7D6","#737173",0,"","<u>C</u>ancel","background-color:#E7E7E7","this.style.backgroundColor='#FFFFFF';","this.style.backgroundColor='#E7E7E7';")

+"</span>";

//tmp2=rtLoad(4,400,212,true,true,true,true,"center","middle","","","#A8AAA8",0,"#D6D7D6",tmp,"","","");

response.write(rtLoad(4,400,212,true,true,true,true,"center","middle","","","#A8AAA8",0,"#D6D7D6",tmp,"","",""));

//response.write("<br>"+rtLoad(4,400,212,true,true,true,true,"center","middle","","","#A8AAA8",0,"#DEE7EF",tmp,"","",""));

idname_t.innerHTML=rtLoad(2,190,17,true,true,true,true,"center","middle","","","#D6D7D6",0,"","<input type=\"text\" name=\"idname\" size=\"20\">","","","");

passwd_t.innerHTML=rtLoad(2,190,17,true,true,true,true,"center","middle","","","#D6D7D6",0,"","<input type=\"password\" name=\"passwd\" size=\"20\">","","","");

//tt=rtLoad(1,17,17,true,true,true,true,"center","middle","","","#A5C3FF",0,"#A5C3FF","","","","");

//response.write("<br>"+rtLoad(2,21,21,true,true,true,true,"center","middle","","","#FFFFFF",0,"#2971FF",tt,"","",""));

</script></td>

</tr>

</table>

</div>

</body>

</html>