자바스크립트를 이용한 테이블 테두리 라운딩처리 > MySQL Tip

본문 바로가기
 

자바스크립트를 이용한 테이블 테두리 라운딩처리

페이지 정보

작성자 차동박 이름으로 검색 댓글 0건 조회 17,749회 작성일 06-09-15 20:25

본문

제목 :
자바스크립트를 이용한 테이블 테두리 라운딩처리
gray_line4.gif
이름 : PassN 작성일 : 2006/06/16
다운로드1 : zzem_search_01.gif (7k), Download : 0

 
zzem_search_01.gif

 



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;

Parent = obj.parentNode;
objTmp = document.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 = document.createElement('TABLE');
TBody = document.createElement('TBODY');

Table.cellSpacing = 0;
Table.cellPadding = 0;

for (trIDX=0; trIDX < MAX; trIDX++) {
TR = document.createElement('TR');
Space = Math.abs(trIDX - parseInt(radius));
for (tdIDX=0; tdIDX < MAX; tdIDX++) {
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);
Parent.insertBefore(Table, objTmp);
}



여기까지를 bbshop.js에 추가하시거나, 해당문서의 헤드에 넣어주시고
테이블 부분에서 테이블의 id(식별자), radius(테두리 라운딩수준), rborder(테두리색), rbgcolor(테이블배경색) 등을 지정해주시고

라운드 테이블 예제
이런 식이 되겠네요


테이블 뒤에 이렇게 스크립트를 호출해주시면 됩니다.

roundTable("test");

roundTable뒤의 () 사이에는 위 테이블에서 지정한 테이블 id를 넣어주시면 됩니다.
 
[이 게시물은 human님에 의해 2007-05-14 17:58:49 bilkboard1에서 복사 됨] [이 게시물은 human님에 의해 2007-05-15 09:09:28 bulk3에서 이동 됨]

댓글목록

등록된 댓글이 없습니다.

Total 243건 5 페이지
MySQL Tip 목록
번호 제목 글쓴이 조회 날짜
171 차동박 이름으로 검색 19726 12-19
170 차동박 이름으로 검색 10545 12-16
169 차동박 이름으로 검색 10576 12-14
168 차동박 이름으로 검색 19559 12-14
167 차동박 이름으로 검색 18318 11-07
166 차동박 이름으로 검색 10314 11-02
165 차동박 이름으로 검색 17009 10-12
164 차동박 이름으로 검색 17325 10-12
163 차동박 이름으로 검색 17425 10-11
162 차동박 이름으로 검색 18809 10-11
161 차동박 이름으로 검색 30612 10-11
160 차동박 이름으로 검색 17503 10-11
159 차동박 이름으로 검색 21476 10-11
158 차동박 이름으로 검색 18270 10-11
157 차동박 이름으로 검색 18690 09-17
열람중 차동박 이름으로 검색 17750 09-15
155 차동박 이름으로 검색 27961 08-24
154 차동박 이름으로 검색 17291 08-21
게시물 검색