테두리가 둥근 테이블 만들기 프로그래밍/자바스크립트2008/08/26 17:00
1. 먼저 <html>과 </html> 사이에 다음의 소스를 삽입합니다.
<script>
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;
// get parent node
Parent = obj.parentNode;
objTmp =
document.createElement('SPAN');
Parent.insertBefore(objTmp,
obj);
Parent.removeChild(obj);
// get attribute
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;
/*
create table {{
*/
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);
// insert table and remove original
table
Parent.insertBefore(Table, objTmp);
}
</script>
2. <body>와 </body>사이에 다음의 소스를 삽입합니다.
<tr>
<td valign="top">테스트입니다</td>
</tr>
</table>
<script>roundTable("ta");</script>
<head></head>안에 들어가는 내용은 수정할 필요가 없습니다. <body></body>안에 들어가는 소스내용만 입맛에 따라 바꾸어주세요.
* 테이블 테그 안의 가로 크기와 세로 크기를 수정합니다.
width="300" height="100"
* 테이블 테두리 색상과 테이블 안쪽 색상을 정합니다.
rborder="#999999" rbgcolor="#F8F8F8"
* 테이블 둥근 테두리 정도 (값이 클수록 더욱 둥글 둥글 해집니다)
radius="3"
'프로그래밍 > 자바스크립트' 카테고리의 다른 글
| INPUT TYPE 에서 숫자만 입력받기 (0) | 2009/04/10 |
|---|---|
| 테두리가 둥근 테이블 만들기 (0) | 2008/08/26 |
| 체크시 오늘 하루동안 새창 열지 않기 (0) | 2008/08/25 |
| 링크시 생기는 테두리 한번에 없에는 자바스크립트 (6) | 2008/08/22 |
댓글을 달아 주세요