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

by

스크립트 소스는 다음과 같습니다.

소스보자

<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





사용법)

테이블에 아이디태그가 있어야 합니다.

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



위 스크립트를 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



Parent.insertBefore(Table, objTmp);

//제일 하단에 이렇게 넣고

ttt.value+=”<table border=0 cellspacing=0 cellpadding=0>”+Table.innerHTML+”</table>”;

본문에 이렇게 넣으면 라운드 테이블의 소스가 넣어지네요.

<textarea id=ttt cols=80 rows=20 onclick=this.select()></textarea>