자바스크립트, 모서리가 둥근 테이블 만들기.

JavaScript 2009. 1. 12. 13:20

http://blog.hompy.info/555

자바스크립트, 모서리가 둥근 테이블 만들기.

사용자 삽입 이미지

<html>
<head>
<title>모서리가 둥근 테이블 입니다.</title>
<script>
<!--
function round_table(objID) {
var obj = d0cument.getElementById(objID);
var Parent, objTmp, Table, TBody, TR, TD;
var bdcolor, bgcolor, Space;
var trIDX, tdIDX, MAX;
var styleWidth, styleHeight;
Parent = obj.parentNode;
objTmp = d0cument.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 = d0cument.createElement('TABLE');
TBody = d0cument.createElement('TBODY');
Table.cellSpacing = 0;
Table.cellPadding = 0;
for (trIDX=0; trIDX < MAX; trIDX++) {
TR = d0cument.createElement('TR');
Space = Math.abs(trIDX - parseInt(radius));
for (tdIDX=0; tdIDX < MAX; tdIDX++) {
TD = d0cument.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>
<table id="ta" width="300" height="140" border="0" radius="3" rborder="blue" rbgcolor="#F8F8F8">
<tr>
<td>
모서리가 둥근 테이블 입니다.
<table id="taa" width="200" height="120" border="0" radius="6" rborder="darkgreen" rbgcolor="#F8F8F8">
<tr>
<td>
모서리가 둥근 테이블.
</td>
</tr>
</table>
</td>
</tr>
</table>
<script>
round_table("ta");
round_table("taa");
</script>
</body>
</html>

'JavaScript' 카테고리의 다른 글

클립보드 복사 기능 구현을 위한 소스 코드  (0) 2009.01.19
동적 HTML 객체 모델 요소의 위치와 면적 계산  (0) 2009.01.12
자바스크립트, 객체의 속성과 메소드와 이벤트 핸들러  (0) 2009.01.12
자바스크립트 createElement, insertBefore, replaceChild, appendChild  (0) 2009.01.12
이는 막대그래프 자바스크립트 소스  (0) 2009.01.12
Posted by 퓨전마법사
,

티스토리툴바