利用JavaScript代码实现的圆角表格
圆角表格1代码：
<html>
<head>
<title>园角表格</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script language="javascript">
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>
<body topmargin="0" leftmargin="0" scroll=no bgcolor="#FFFFFF"><!--#84CA00-->
<div align="left">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" width="100%" height="100%">
<tr>
<td width="100%" height="100%" align="center">
<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>
<hr noshade color="#36B02D" size="1">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse;color: #36B02D" width="362" height="56">
<tr>
<td width="154" height="22">Your Administrator Username:</td>
<td width="202" height="22" id="idname_t"></td>
</tr>
<tr>
<td width="154" height="22">Your Administrator Password:</td>
<td width="202" height="22" id="passwd_t"></td>
</tr>
<tr>
<td width="154" height="19"></td>
<td width="202" height="19"></td>
</tr>
</table></span>
<script language="javascript">
// 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>
<title>园角表格</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script language="javascript">
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 solid #737173;width:170px;height:15px;color:#ff0000 }
-->
</style>
</head>
<body topmargin="0" leftmargin="0" scroll=no bgcolor="#DEE7EF">
<div align="left">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" width="100%" height="100%">
<tr>
<td width="100%" height="100%" align="center">
<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>
<hr noshade color="#999999" size="1">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse;color: #737173" width="362" height="56">
<tr>
<td width="154" height="22">Your Administrator Username:</td>
<td width="202" height="22" id="idname_t"></td>
</tr>
<tr>
<td width="154" height="22">Your Administrator Password:</td>
<td width="202" height="22" id="passwd_t"></td>
</tr>
<tr>
<td width="154" height="19"></td>
<td width="202" height="19"></td>
</tr>
</table></span>
<script language="javascript">
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>