 |
 |
|||||
|---|---|---|---|---|---|---|
|
||||||
 |
 |
|||||
2007-1-5 18:32
admin
JS處理的圓角表格
今天在整理硬盤的時候突然發現N年前收藏的一段關於JS制作表格圓角的代碼，雖然現在俺自己也不喜歡用表格了，但是，js的思路到是可以學習下，創意不錯的·〕
源碼如下：[code]<html>
<head>
<title>園角表格</title>
<meta http-equiv="Content-Type" content="text/html; charset=big5">
<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 +"\"";
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>[/code]
今天在整理硬盤的時候突然發現N年前收藏的一段關於JS制作表格圓角的代碼，雖然現在俺自己也不喜歡用表格了，但是，js的思路到是可以學習下，創意不錯的·〕
源碼如下：[code]<html>
<head>
<title>園角表格</title>
<meta http-equiv="Content-Type" content="text/html; charset=big5">
<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 +"\"";
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>[/code]
頁: [1]
查看完整版本: JS處理的圓角表格
| 重要聲明：本論壇是以即時上載留言的方式運作，XD Forum Pro - 專業論壇對所有留言的真實性、完整性及立場等，不負任何法律責任。而一切留言之言論只代表留言者個人意見，並非本網站之立場，用戶不應信賴內容，並應自行判斷內容之真實性。 由於本論壇受到「即時上載留言」運作方式所規限，故不能完全監察所有留言，若讀者發現有留言出現問題，例如侵害您的版權，請以電郵方式聯絡我們，並寫上貴公司或機構的相關資料（例如商業登記號及版權持有證明）以便我們查實後盡快處理有關問題。XD Forum Pro - 專業論壇有權刪除任何留言及拒絕任何人士上載留言，同時亦有不刪除留言的權利。切勿撰寫粗言穢語、誹謗、渲染色情暴力或人身攻擊的言論，敬請自律。本網站保留一切管理及法律追究之權利。 |
Powered by Discuz! Archiver 5.5.0 © 2001-2006 Comsenz Inc.