이미지 없이 모서리 둥근 테이블 만들기
본문
<head> 와 </head> 사이에 아래의 소스를 삽입합니다.
적용하는 방법은....
테이블에 아이디태그가 있어야 합니다.
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>
출처 : http://www.aircon1004.com/data/bbs/board.php?bo_table=pds1&wr_id=154
| <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> |
적용하는 방법은....
테이블에 아이디태그가 있어야 합니다.
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>
출처 : http://www.aircon1004.com/data/bbs/board.php?bo_table=pds1&wr_id=154
관련링크
댓글목록
등록된 댓글이 없습니다.