웰

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

어디선가 낚시했다가 필요할것 같아 보관해 놓은 것인데 .
아마 모질라는 잘 모르겠습니다. ^^
링크 #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건
+
제목 글쓴이 날짜 조회
06-02-19 조회 3,142
06-02-02 조회 5,482
06-01-27 조회 3,736
06-01-27 조회 3,505
06-01-26 조회 3,974
06-01-20 조회 4,109
06-01-19 조회 4,158
06-01-15 조회 3,681
06-01-13 조회 4,049
06-01-10 조회 3,642
06-01-10 조회 3,225
06-01-09 조회 3,831
06-01-05 조회 3,499
06-01-05 조회 3,572
06-01-05 조회 4,841
06-01-04 조회 4,317
06-01-04 조회 6,065
05-12-30 조회 3,423
05-12-30 조회 5,565
05-12-30 조회 4,186
05-12-29 조회 3,927
05-12-27 조회 4,787
05-12-23 조회 3,699
05-12-21 조회 4,867
05-12-21 조회 5,116
05-12-16 조회 4,554
05-12-09 조회 4,577
05-12-05 조회 5,187
05-12-01 조회 3,416
05-11-30 조회 6,180
05-11-30 조회 4,725
05-11-29 조회 3,647
05-11-26 조회 3,310
05-11-10 조회 3,755
05-11-09 조회 4,069
05-11-09 조회 3,844
bbbking
05-11-05 조회 6,819
05-10-23 조회 3,727
bbbking
05-10-22 조회 5,358
05-10-20 조회 3,188
05-10-13 조회 8,391
05-10-09 조회 3,489
05-09-29 조회 4,531
05-09-28 조회 5,362
05-09-27 조회 3,630
05-09-27 조회 4,911
05-09-24 조회 4,128
05-09-23 조회 5,137
05-09-22 조회 6,138
05-09-22 조회 5,224
05-09-21 조회 6,885
05-09-15 조회 3,070
05-09-11 조회 4,289
05-09-08 조회 4,546
05-09-08 조회 3,951
05-09-08 조회 3,444
05-09-05 조회 5,659
05-09-04 조회 3,255
05-09-02 조회 3,219
05-09-02 조회 2,872
05-09-02 조회 2,657
05-09-01 조회 4,729
05-09-01 조회 5,862
05-08-31 조회 3,474
05-08-31 조회 4,159
05-08-25 조회 6,848
05-08-25 조회 3,866
05-08-21 조회 3,303
05-08-19 조회 5,562
05-08-18 조회 3,661
05-08-18 조회 3,262
05-08-17 조회 3,761
05-08-16 조회 3,612
05-08-14 조회 3,890
05-08-14 조회 4,372
05-08-08 조회 3,667
05-08-07 조회 5,749
05-08-05 조회 4,226
05-08-04 조회 5,555
05-08-01 조회 4,008
05-07-29 조회 5,120
05-07-29 조회 5,360
05-07-28 조회 8,036
05-07-27 조회 4,824
05-07-25 조회 3,751
05-07-24 조회 5,384
05-07-24 조회 3,212
05-07-22 조회 5,272
05-07-21 조회 4,743
05-07-21 조회 3,565
05-07-19 조회 5,839
bbbking
05-07-19 조회 3,487
05-07-16 조회 5,489
05-07-15 조회 4,577
05-07-14 조회 4,618
05-07-13 조회 4,790
05-07-12 조회 4,181
05-07-12 조회 6,918
05-07-11 조회 3,930
05-07-08 조회 6,804