커뮤니티 > 자바스크립트 > 이미지 없이 모서리 둥근 테이블 만들기

에어컨업체

|

|

|

|

|

중고에어컨

|

에어컨설치

|

커뮤니티홈

포토갤러리

홈피자료실

플래시게임

자바스크립트

|

|

태그연습장

홈피자료실

에어컨설치업체 안내

인천광역시	032-467-6004
경기수원시	031-239-3196
경기화성시	031-377-6855
경기안산시
경기오산시
경기용인시	031-377-6855
경기성남시
경기시흥시	010-9266-5975
경기부천시	032-204-8010

전국 에어컨업체 안내

	총 게시물 209건, 최근 0 건

이미지 없이 모서리 둥근 테이블 만들기

글쓴이 : 테이블 날짜 : 2006-09-29 (금) 17:24 조회 : 10000

<head> 와 </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;


       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>

적용하는 방법은....

테이블에 아이디태그가 있어야 합니다.
roundTable(테이블의 아이디문자열);
처럼 함수를 실행시키시면 됩니다.
단, 이 때 원래의 테이블에서 raidus(둥근 정도) 값과 테두리와 배경색의 색상값을 지정하도록 되어있습니다.

int radius : 둥근 정도입니다. 가능한 값은 1 <= radius<= 6 입니다. radius 를 계산하는 부분의 규칙을 잘 몰라서 우선은 한정시켜놨습니다. 나중에 모서리 픽셀을 제대로 구할 수 있게 되면 범위를 수정하겠습니다.

string rborder : 테두리의 색상값. #FFFFFF 와 같은 16진수 색상값과 white 와 같은 색상지시문자열 모두 사용가능.
string rbgcolor : 라운드테이블의 배경색. 배경색은 라운드 테이블 테두리 선 안쪽의 색상을 말하는 것입니다. rborder와 마찬가지로 16진수 색상값과 색상지시문자열 모두 사용가능합니다.

예)
<table id="daerew" width="300" height="150" border="0" radius="3" rborder="#999999" rbgcolor="#F8F8F8">
<tr>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td colspan="2">대류커뮤니티</td>
</tr>
</table>
<script>roundTable("daerew");</script>

	총 게시물 209건, 최근 0 건


번호	제목	글쓴이	날짜	조회

169	자동 스크롤 메뉴 (끄기 기능, 무한 스크롤 X)	운영자	02-04	10070

168	실제 이미지 크기 알아내기	kim1966	04-02	10040

167	오늘 하루 이 페이지 열지 않기 팝업창 소스	proman	11-17	10025

166	iframe 형식을 사용하지 못하는 게시판 사용법	프로	02-27	10008

165	이미지 없이 모서리 둥근 테이블 만들기	테이블	09-29	10001

164	문서 내부 단어 검색(Ctrl-F)	운영자	02-06	9993

163	아이프레임 오토 리사이즈 컨트롤 - 다른 도메인	운영자	02-15	9981

162	웹문서에 페이지 로딩중 효과	이민영	09-27	9980

161	예쁜 글씨체 +1	운영자	02-04	9974

160	점프메뉴로 iframe 안으로 링크걸기 방법	whdms	11-11	9957

159	텍스트 네온효과 배너	운영자	02-06	9924

158	아이프레임 오토 리사이즈 컨트롤 - 동일 도메인	운영자	02-15	9921

157	그림에 배경그림 넣기	운영자	02-06	9918

156	위치지정태그	운영자	02-04	9912

155	이미지 클릭하면 새창으로 크기에 맞게 이미지 …	운영자	02-10	9898

154	XP SP2 팝업창 차단과 해법	이야호	09-29	9895

153	iframe 을 투명하게 삽입하자	김광욱	03-22	9882

152	모자이크식 슬라이드쇼	프로	08-10	9869

151	한자리에서 슬라이드되는 이미지올리기	운영자	02-04	9862

150	검색엔진을 선택하여 검색하는 소스	운영자	02-26	9859

처음 1 2 3 4 5 6 7 8 9 10 다음 맨끝

회사소개 | 이용약관 | 개인정보취급방침 | 책임의한계와 법적고지 | 이메일무단수집거부 | 이용안내