모서리가 둥근 테이블 만들기
|
||||||||
Radius 값이 6일때 :
|
||||||||||||||||
<head>
<title>https://www.dajuji.com</title>
<script language="javascript">
function roundTable(objID) {
var obj = document.getElementById(objID);
var Parent, objTmp, Table, TBody, TR, TD;
var bdcolor, bgcolor, Space;
var trIDX, tdIDX, MAX;
var styleWidth, styleHeight;
Parent = obj.parentNode;
objTmp = document.createElement('SPAN');
Parent.insertBefore(objTmp, obj);
Parent.removeChild(obj);
bdcolor = obj.getAttribute('rborder');
bgcolor = obj.getAttribute('rbgcolor');
radius = parseInt(obj.getAttribute('radius'));
if (radius == null || radius < 1) radius = 1;
else if (radius > 6) radius = 6;
MAX = radius * 2 + 1;
Table = document.createElement('TABLE');
TBody = document.createElement('TBODY');
Table.cellSpacing = 0;
Table.cellPadding = 0;
for (trIDX=0; trIDX < MAX; trIDX++) {
TR = document.createElement('TR');
Space = Math.abs(trIDX - parseInt(radius));
for (tdIDX=0; tdIDX < MAX; tdIDX++) {
TD = document.createElement('TD');
styleWidth = '1px'; styleHeight = '1px';
if (tdIDX == 0 || tdIDX == MAX - 1) styleHeight = null;
else if (trIDX == 0 || trIDX == MAX - 1) styleWidth = null;
else if (radius > 2) {
if (Math.abs(tdIDX - radius) == 1) styleWidth = '2px';
if (Math.abs(trIDX - radius) == 1) styleHeight = '2px';
}
if (styleWidth != null) TD.style.width = styleWidth;
if (styleHeight != null) TD.style.height = styleHeight;
if (Space == tdIDX || Space == MAX - tdIDX - 1) TD.style.backgroundColor = bdcolor;
else if (tdIDX > Space && Space < MAX - tdIDX - 1) TD.style.backgroundColor = bgcolor;
if (Space == 0 && tdIDX == radius) TD.appendChild(obj);
TR.appendChild(TD);
}
TBody.appendChild(TR);
}
Table.appendChild(TBody);
Parent.insertBefore(Table, objTmp);
}
</script>
</head>
<body>
<center>
<b>Radius 값이 2일때 :</b><br>
<table id="ta" width="300" height="150" border="0" radius="2" rborder="#999999" rbgcolor="#F8F8F8">
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td colspan="2">모서리가 둥근 테이블 테스트</td>
</tr>
</table>
<script>roundTable("ta");</script><br>
<b>Radius 값이 6일때 :</b><br>
<table id="ta1" width="300" height="150" border="0" radius="6" rborder="#999999" rbgcolor="#F8F8F8">
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td colspan="2">모서리가 둥근 테이블 테스트</td>
</tr>
</table>
<script>roundTable("ta1");</script></body>
신고
"님의 댓글"
이 댓글을 신고하시겠습니까?
