테스트 사이트 - 개발 중인 베타 버전입니다

이미지 없이 모서리 라운드 테이블 만들어 최신글 구현

· 20년 전 · 8479 · 11
어디선가 낚시했다가 필요할것 같아 보관해 놓은 것인데 .
아마 모질라는 잘 모르겠습니다. ^^
링크 #1은 원본을 그대로 이용한 것이고
링크 #2는 최신글에 적용 시켜 보았습니다.


<HTML>
<HEAD>
<TITLE> 모서리 라운드테이블 </TITLE>
</HEAD>
<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');
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>

<BODY>
<table id="ta" width="300" height="150" border="0" radius="3" rborder="#999999" rbgcolor="#F8F8F8">
<tr>
<td valign="top">테스트입니다</td>
</tr>
</table>
<script>roundTable("ta");</script>

</BODY>
</HTML><div class='small'>[이 게시물은 관리자님에 의해 2011-10-31 16:54:41 CSS에서 이동 됨]</div>

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

댓글 11개

링크가 열리지 않습니다

게시글 목록

번호 제목
866
864
863
862
860
859
858
856
855
854
852
851
850
848
847
845
844
843
842
841
839
829
824
823
822
820
817
815
814
813