태그 자료실 1031

회원로그인

무료회원가입 보안로그인

아이디/비밀번호찾기

이미지 없이 테이블의 모서리 라운드 처리하기

17년 전

<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');
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);

// insert table and remove original table
Parent.insertBefore(Table, objTmp);
}
</script>



<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>

추천 목록

번호	제목
821	레이어에 스크롤바 달기
820	브라우저 체크함수
819	OS 체크함수
818	go Top, go Bottom 버튼 만들기
817	prototype String 함수
816	/var/log/secure 로그를 이용한 IP Deny 자동 등록 스크립트
815	플래쉬를 이용한 게시판 자동등록 방지 알고리즘
814	함수나 클래스 중복선언 확인 함수
813	fsockopen이용해 file함수 처럼 사용하기
812	사이즈가 큰이미지 웹페이지 출력시 자동으로 사이즈 줄이기...
811	바운스되면서 따라다니는 Floating Menu
810	한글기준으로 문자 자르기 함수
809	버튼을 클릭하면 노트패드를 실행합니다..
808	알람시계 (설정된 시간이 되면 경고창으로 알려줍니다.)
807	자바스크립트 캐쉬파일 생성안하기
806	XP Servicepack2, IE7에서도 팝업창 사이즈 이쁘게 조절하기
805	소스보기 할 경우 소스보기 창이 뜨지 않게하기
804	무단링크 방지하기
	이미지 없이 테이블의 모서리 라운드 처리하기
802	홈페이지 Q/A에 많이 이용하고 있는 소스입니다.
801	조건에 따라 다른 페이지를 열어주는 소스
800	입력폼에서 변수 체크하는 스크립트
799	폼 관련 객체들
798	주민등록번호체크원리(알고리즘)와 소스
797	php.ini 해설
796	자바스크립트로 대분류,중분류,소분류 나누는 방법
795	JavaScript Reference
794	자바스크립트 객체와 이벤트
793	선택 후 버튼에 따라 폼액션 바꾸기 샘플
792	PHP따라하기 - 재미있는 정규표현식 I