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

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

· 20년 전 · 7004 · 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개

링크가 열리지 않습니다

게시글 목록

번호 제목
9921
28612
28611
28605
9920
JavaScript Samba 설정
9916
9915
28596
9906
28572
HTML if 23
28564
9898
24744
24742
24741
24736
28558
9896
9893
9892
9891
9890
28557
9889
9888
9887
9885
9884
28555
9883
9881
9880
9879
9878
9877
9876
9873
9871
9864
9840
9836
9834
9832
9830
9828
9826
9797
9754
9709
9686
9646
9634
9617
9615
9613
28553
9611
9607
24726
24725
24721
9569
9567
9550
9531
9527
28550
9493
9479
9431
9418
9372
9331
9267
9216
9215
9214
28549
28548
9213
28543
9211
9210
9208
24718
24706
24702
24701
24698
24695
9202
28540
24688
9194
24679
24674
24670
9193
9191
9190