웰

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

어디선가 낚시했다가 필요할것 같아 보관해 놓은 것인데 .
아마 모질라는 잘 모르겠습니다. ^^
링크 #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개

감사합니다.
불여우에서 잘됩니다.
링크주소 참조
멋진 팁 이군요....

꼭 써보고 싶네요...감사합니다..
blueb에서 본 스크립트네요
모질라도 잘 되는군요
너무 감사합니다^-^
이 소스는
Space = Math.abs(trIDX - parseInt(radius));
for (tdIDX=0; tdIDX < MAX; tdIDX++) {

이게 빠져서 에러납니다.

링크 참조하세요.
감사합니다!!
링크가 열리지 않습니다
댓글을 작성하시려면 로그인이 필요합니다.

프로그램

8,188건
+
제목 글쓴이 날짜 조회
10-09-25 조회 2,761
10-09-19 조회 2,797
10-09-15 조회 2,810
10-09-15 조회 4,219
10-09-15 조회 3,452
10-09-15 조회 2,544
10-09-07 조회 3,663
10-08-27 조회 4,121
10-06-11 조회 4,301
10-05-31 조회 2,550
10-02-27 조회 5,062
10-02-09 조회 3,807
09-10-10 조회 7,402
09-03-19 조회 3,254
09-02-09 조회 3,524
09-02-09 조회 4,572
08-11-01 조회 2,958
08-09-29 조회 4,611
08-09-26 조회 3,543
08-09-26 조회 3,618
08-09-26 조회 2,755
08-09-26 조회 3,797
08-09-26 조회 3,529
08-09-26 조회 4,296
08-09-18 조회 3,638
08-09-09 조회 3,273
08-08-28 조회 2,817
08-07-06 조회 3,581
08-05-21 조회 4,745
08-05-13 조회 4,588
08-04-17 조회 4,955
08-02-19 조회 3,572
08-01-18 조회 3,908
08-01-10 조회 3,871
07-10-22 조회 3,700
07-10-09 조회 4,366
07-10-03 조회 3,581
07-07-06 조회 4,247
07-07-06 조회 4,464
07-07-06 조회 4,080
07-06-28 조회 3,606
07-06-05 조회 3,622
07-06-05 조회 4,178
07-05-30 조회 3,335
07-05-02 조회 3,714
07-04-15 조회 5,202
07-04-11 조회 3,680
07-04-05 조회 3,980
07-03-31 조회 3,188
07-03-31 조회 4,162
07-03-30 조회 3,781
07-03-24 조회 4,037
07-03-22 조회 3,699
07-03-12 조회 4,455
07-02-16 조회 3,325
07-02-14 조회 5,204
07-02-10 조회 4,048
07-02-09 조회 4,430
07-01-19 조회 4,095
07-01-16 조회 5,027
06-12-16 조회 5,891
06-11-30 조회 3,649
06-11-25 조회 3,764
06-10-15 조회 5,115
06-09-26 조회 5,349
06-09-26 조회 5,470
06-09-22 조회 4,333
06-09-21 조회 3,577
06-09-21 조회 3,676
06-09-02 조회 3,521
06-08-08 조회 5,157
06-07-20 조회 3,783
06-07-17 조회 3,403
06-07-13 조회 4,232
06-07-11 조회 3,521
06-07-11 조회 3,523
06-07-11 조회 3,884
06-06-29 조회 6,125
06-06-19 조회 6,500
06-06-02 조회 3,567
06-05-24 조회 5,033
06-05-14 조회 7,835
06-05-08 조회 3,941
06-02-02 조회 5,498
05-12-16 조회 4,570
05-12-05 조회 5,203
05-06-28 조회 4,169
05-04-11 조회 4,117
05-04-11 조회 4,297
05-04-11 조회 3,358
05-03-13 조회 3,268
05-03-12 조회 4,330
04-12-08 조회 7,821
04-12-01 조회 5,227
04-11-28 조회 3,421
04-11-28 조회 3,251
04-08-05 조회 5,670
04-08-05 조회 5,013
04-08-05 조회 5,626