태그 자료실 736

회원로그인

무료회원가입 보안로그인

아이디/비밀번호찾기

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

19년 전

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>

추천 목록

번호	제목
360	PHP폼 사용시 폼 양식에서 값이 사라질때....
359	자바스크립트 성능 향상을 위한 3가지 팁
358	PHP MySQL 함수
357	PHP 배열 함수
356	랜덤으로 텍스트 문자 바꾸기
355	정해진 시간부터 줄어드는 스탑워치
354	목록펼침
353	url 창안에 아이콘 넣기
352	사용자 브라우저의 언어에 따라 다른 페이지도 이동시키는 자스
351	자스를 이용한 페이지 리프레쉬
350	url에 있는 있는 데이타를 읽어 분해해주는 소스
349	몇번째 방문했는지 알려주는 스크립트
348	쿠키 삭제하기
347	쿠키에 데이타 쓰고 읽어오기
346	이름을 물어보고 접속시 다른 메세지 내보내기
345	쿠키에 있는 값을 체크해서 다른 페이지로 보내기
344	쿠키를 이용해서 북마크 페이지를 만드는 소스 입니다
343	쿠키 만들기, 읽기, 지우기
342	월.일 만으로 지정된 날에 특정한 페이지로 이동하게 하는 소스
341	마우스 오른쪽버튼 클릭하면 즐겨찾기 되기~ ^^;
340	간단하면서도 강력한 웹페이지에 암호걸기
	모서리가 둥근 테이블 만들기
338	무료계정에 생기는 프레임 및 팝업창 없애기
337	원클릭으로 세개의 iframe에 링크 호출하기
336	모니터를 한바퀴 도는 팝업창
335	자바스크립트 에러내용을 본문페이지에 보여줍니다.
334	소스보기 버튼을 클릭하면 팝업창에 소스내용을 보여줍니다..
333	쿠키를 이용하여 하루에 딱 한번만 팝업을 띄웁니다..
332	사용자 PC가 팝업차단상태인지 아닌지 체크합니다..
331	현재 쿠키값을 화면 또는 경고창으로 알려줍니다.