태그 자료실

회원로그인

무료회원가입 보안로그인

아이디/비밀번호찾기

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

16년 전

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

추천 목록

번호	제목
815	무단링크 방지하기
	이미지 없이 테이블의 모서리 라운드 처리하기
813	홈페이지 Q/A에 많이 이용하고 있는 소스입니다.
812	조건에 따라 다른 페이지를 열어주는 소스
811	입력폼에서 변수 체크하는 스크립트
810	폼 관련 객체들
809	주민등록번호체크원리(알고리즘)와 소스
808	php.ini 해설
807	자바스크립트로 대분류,중분류,소분류 나누는 방법
806	JavaScript Reference
805	자바스크립트 객체와 이벤트
804	선택 후 버튼에 따라 폼액션 바꾸기 샘플
803	PHP따라하기 - 재미있는 정규표현식 I
802	자바스크립트 3자리마다 콤마찍기
801	날짜 구하기
800	자바스크립트 사용자 함수
799	javascript함수
798	익스플로러 주소창에 이쁜 아이콘 넣기
797	각종 메타테크
796	MARQUEE 태그
795	tabindex : TAB 키를 통하여 이동순서 지정
794	text-overflow
793	textarea 텍스트 입력창에 넓이값에 자동으로 반응하는 팁
792	head에 사용되는 메타테그 및 기타 테그
791	rand() 함수를 이용한 뒤죽박죽 날짜 출력
790	초간단 php 랜덤 이미지 및 랜덤 배경이미지 소스
789	미디 랜덤으로 듣기 완벽해결!
788	[배경음악] 첫곡은 랜덤, 그 이후로는 순차재생
787	랜덤이미지..Javascript
786	배경색 랜덤으로 바꾸는 스크립트