'JavaScript'에 해당되는 글 1건

  1. 2006.09.19 [javascript] 이미지 없이 모서리 라운드 테이블 만들기(소스) (2)
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>

자동차보험,의료,보험,대출,미용,금융,법률,부동산,중고자동차,무료듣기,건강,돈,국민임대아파트

Posted by CodeChef

댓글을 달아 주세요

  1. Favicon of http://blog.empas.com/letmesaygoodbye/ BlogIcon 무플 2008.10.13 03:10 신고  댓글주소  수정/삭제  댓글쓰기

    나는 그 무서움 속에 살아요. 항상 후덜덜.ㅋ (성인광고쓰레기버리고 가는 사람 말고ㅠ) 어쩌죠?

    • Favicon of http://codechef.tistory.com BlogIcon CodeChef 2008.10.13 20:04 신고  댓글주소  수정/삭제

      저는 그 무서움이 익숙해져서 이젠 괜찮답니다.. ㅜㅜ 무플로 그냥 필요한 내용만 가져가는 사람은 어찌해야할지 답이없네요 ㅋㅋ