TAG appendChild,
createElement,
getAttribute,
insertBefore,
javascript,
removeChild,
table,
둥근,
모서리,
자바스크립트,
테이블
자바스크립트, 모서리가 둥근 테이블 만들기.
| <html> <head> <title>모서리가 둥근 테이블 입니다.</title> <script> <!-- function round_table(objID) { var obj = document.getElementById(objID); var Parent, objTmp, Table, TBody, TR, TD; var bdcolor, bgcolor, Space; var trIDX, tdIDX, MAX; var styleWidth, styleHeight; Parent = obj.parentNode; objTmp = document.createElement('SPAN'); Parent.insertBefore(objTmp, obj); Parent.removeChild(obj); 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; 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); Parent.insertBefore(Table, objTmp); } --> </script> </head> <body> <table id="ta" width="300" height="140" border="0" radius="3" rborder="blue" rbgcolor="#F8F8F8"> <tr> <td> 모서리가 둥근 테이블 입니다. <table id="taa" width="200" height="120" border="0" radius="6" rborder="darkgreen" rbgcolor="#F8F8F8"> <tr> <td> 모서리가 둥근 테이블. </td> </tr> </table> </td> </tr> </table> <script> round_table("ta"); round_table("taa"); </script> </body> </html> |
(0) 
(0)
Copyright ⓒ
댓글을 달아 주세요