태그 자료실

	\| 무료회원가입 \| 아이디/비번찾기

회원로그인

무료회원가입 아이디/비밀번호찾기

보안로그인 SECURE LOGIN

기존테이블을 모서리가 둥근 테이블로 자동변환

13년 전

스크립트 소스는 다음과 같습니다.
<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>

사용법)
테이블에 아이디태그가 있어야 합니다.
전 한번 변환하는게 몇개 안되어서 아이디를 입력받아 함수를 실행하도록 했지만, 만약 많은 양을 한꺼번에 변환해야할 경우에는 함수를 변경해서 사용하시기 바랍니다. ^^

위 스크립트를 HTML문서에 포함하고(당연히...),
roundTable(테이블의 아이디문자열);
처럼 함수를 실행시키시면 됩니다.
단, 이 때 원래의 테이블에서 raidus(둥근 정도) 값과 테두리와 배경색의 색상값을 지정하도록 되어있습니다.

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

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

예)
<table id="ta" 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("ta");</script>

자세한 것은 링크를 참조하시면 됩니다.

브라우저 정보)
Internet Explorer 5.0 and later
Mozilla 1.5
Firebird 0.6 한글판
Netscapce Navigator 7

위의 두 브라우저에서는 제가 테스트해봤습니다. 다른 브라우저에서도 작동이 잘되면 말씀해주시기 바랍니다. (이 부분은 계속 업데이트 됩니다)

추천 목록

번호	제목
3,025	여러 도메인들 간 쿠키 공유하기
3,024	태그 사이에 있는 텍스트를 추출
3,023	[JQuery] textbox focus on off일때 숫자 콤마 보여주기
3,022	쿠키 생성,가져오기,삭제
3,021	사용자 함수 모음
3,020	마우스,키보드 제한 ( 오른쪽클릭,드래그,영역선택등..)
3,019	[HTML5] <video> - DOM으로 제어하기
3,018	HTML5 video 태그에서 영상 좌우반전
3,017	PHP - 특정 태그 및 문자열 추출, 제거
3,016	[PHP] define과 defined의 차이
3,015	우클릭 완벽차단 스크립트
3,014	iframe 높이 100% 맞추기
3,013	curl 함수를 이용한 HTTP REFERER 변경
3,012	윈도우10 시스템 파일 및 Dism 검사
3,011	텍스트 줄바꿈, 글자자르기 CSS
3,010	jQuery Mobile에서 유용한 코드 10가지.
3,009	[PHP] dirname()함수와 $_SERVER 관련 상수들
3,008	[PHP] 파일 크기, 사이즈 불러오는 함수, filesize()
3,007	[jQuery] jQuery Quick API
3,006	[ transition ] 링크 hover 색상 변화 속도 조절
3,005	PHP 5.3.0 에서 사라진 함수들 대체
3,004	어떤 파일들이 include 나 require 되었는지 확인하는 함수(get_included_files)
3,003	PHP 날짜 형식 및 계산하기(날짜 더하고 빼기)
3,002	jQuery Mobile에서 유용한 코드 10가지.
3,001	값이 배열 안에 존재하는지 확인하는 in_array함수