본문 바로가기
웹개발/자바스크립트

[javascript] 이미지 없이 모서리 라운드 테이블 만들기(소스)

CodeChef 2006. 9. 19. 08:27
FireFox, Mozilla 모두 잘 표시됩니다.
아래 소스를 html형식으로 저장해서 보실 수 있습니다.

<HTML>
<HEAD>
<TITLE> Round Table</TITLE>
</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;
     
      /*
            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');
                                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>

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

</BODY>
</HTML>

'웹개발 > 자바스크립트' 카테고리의 다른 글

프론트엔드 기술면접 질문 및 답변 정리 - ES6 편  (0) 2020.07.15
프론트엔드 면접질문 및 답변 정리 - 자바스크립트 기본 편  (0) 2020.07.15
nvm으로 Node.js 버전 관리하기  (0) 2017.04.12
사이트내 링크된 곳의 테두리 점선 없애기  (0) 2006.09.18

'웹개발/자바스크립트' Related Articles

티스토리툴바