JQuery를 이용한 둥근 테두리 테이블 만들기

웹눈 님의 Round Table 소스를 JQuery를 이용하는 소스로 수정해봤습니다.

JQuery를 요 몇일 보고 있는데, 재미있네요..

이제 막 시작한 단계로 더 깔끔하게 다듬을 수 있을 것도 같은데..

아직은 내공이 부족하네요.

좋은 방법 있으면 공유 해주시면 고맙겠습니다.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
function roundTable(objID) {
	var $obj = $("table#" + objID);
	var s, r;
	var y, x, MAX;
	var w, h;

	r = parseInt($obj.attr('radius'));
	if (r == null || r < 1) r = 1;
	else if (r > 6) r = 6;

	MAX = r * 2 + 1;

	$obj.before("<TABLE id='tmpRoundTbl'></TABLE>")
	$("table#tmpRoundTbl")
		.attr("cellSpacing", 0)
		.attr("cellPadding", 0)
		.append("<TBODY></TBODY>");

	for (y=0; y < MAX; y++) {
		$("table#tmpRoundTbl TBODY").append("<TR></TR");
		s = Math.abs(y - parseInt(r));
		for (x=0; x < MAX; x++) {
			
			$("table#tmpRoundTbl TBODY TR:eq("+y+")")
				.append("<TD></TD>");

			w = '1px'; h = '1px';
			if (x == 0 || x == MAX - 1) h = null;
			else if (y == 0 || y == MAX - 1) w = null;
			else if (r > 2) {
				if (Math.abs(x - r) == 1) w = '2px';
				if (Math.abs(y - r) == 1) h = '2px';
			}

			if (w != null) 
				$("table#tmpRoundTbl TBODY TR:eq("+y+") TD:eq("+x+")")
					.css("width", w);
			if (h != null) 
				$("table#tmpRoundTbl TBODY TR:eq("+y+") TD:eq("+x+")")
					.css("height", h);

			if (s == x || s == MAX - x - 1) 
				$("table#tmpRoundTbl TBODY TR:eq("+y+") TD:eq("+x+")")
					.css("backgroundColor", $obj.attr('rborder') );
			else if (x > s && s < MAX - x - 1) 
				$("table#tmpRoundTbl TBODY TR:eq("+y+") TD:eq("+x+")")
					.css("backgroundColor", $obj.attr('rbgcolor') );
		}
	}

	$("table#tmpRoundTbl TBODY TR:eq("+s+") TD:eq("+r+")").append( $obj );
}
</script>


<table id="ta" width="300" height="100" border="0" 
    radius="3" rborder="#999999" rbgcolor="#F8F8F8">
<tbody><tr>
<td valign="top">테스트입니다</td>
</tr>
</tbody></table>
<span>
<script>roundTable("ta");</script>
</span>

[ 참고 ] 

Javascript로 테두리가 둥근 테이블 만들기

TAEYO.NET의 JQuery 강좌

jquery.com