태그 자료실

회원로그인

무료회원가입 보안로그인

아이디/비밀번호찾기

모서리가 둥근 테이블 만들기

18년 전

http://www.xtx.kr Radius 값이 2일때 :

Cell 1	Cell 2
모서리가 둥근 테이블 테스트

Radius 값이 6일때 :

Cell 1	Cell 2
모서리가 둥근 테이블 테스트

<head>
<title>http://www.xtx.kr</title>
<script language="javascript">

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;

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>

<center>
<b>Radius 값이 2일때 :</b><br>
<table id="ta" width="300" height="150" border="0" radius="2" rborder="#999999" rbgcolor="#F8F8F8">
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td colspan="2">모서리가 둥근 테이블 테스트</td>
</tr>
</table>
<script>roundTable("ta");</script><br>

<b>Radius 값이 6일때 :</b><br>
<table id="ta1" width="300" height="150" border="0" radius="6" rborder="#999999" rbgcolor="#F8F8F8">
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td colspan="2">모서리가 둥근 테이블 테스트</td>
</tr>
</table>
<script>roundTable("ta1");</script></body>

추천 목록

번호	제목
352	사용자 브라우저의 언어에 따라 다른 페이지도 이동시키는 자스
351	자스를 이용한 페이지 리프레쉬
350	url에 있는 있는 데이타를 읽어 분해해주는 소스
349	몇번째 방문했는지 알려주는 스크립트
348	쿠키 삭제하기
347	쿠키에 데이타 쓰고 읽어오기
346	이름을 물어보고 접속시 다른 메세지 내보내기
345	쿠키에 있는 값을 체크해서 다른 페이지로 보내기
344	쿠키를 이용해서 북마크 페이지를 만드는 소스 입니다
343	쿠키 만들기, 읽기, 지우기
342	월.일 만으로 지정된 날에 특정한 페이지로 이동하게 하는 소스
341	마우스 오른쪽버튼 클릭하면 즐겨찾기 되기~ ^^;
340	간단하면서도 강력한 웹페이지에 암호걸기
	모서리가 둥근 테이블 만들기
338	무료계정에 생기는 프레임 및 팝업창 없애기
337	원클릭으로 세개의 iframe에 링크 호출하기
336	모니터를 한바퀴 도는 팝업창
335	자바스크립트 에러내용을 본문페이지에 보여줍니다.
334	소스보기 버튼을 클릭하면 팝업창에 소스내용을 보여줍니다..
333	쿠키를 이용하여 하루에 딱 한번만 팝업을 띄웁니다..
332	사용자 PC가 팝업차단상태인지 아닌지 체크합니다..
331	현재 쿠키값을 화면 또는 경고창으로 알려줍니다.
330	년,월,일,시,분,초 특정일로부터 몇일째되는날
329	폼 항목중 입력하지 않을때 경고창 띄우기
328	페이지를 항상 새로 로딩하게 하기
327	페이지 자동 이동하기
326	나만의 익스플로러창 만들기
325	textarea 에 입력된 텍스트를 쿠키로 저장 합니다
324	년,월,일을 구해오는 메소드랍니다~
323	자바스크립트로 변수처리하기!