데이터 테이블의 라운드 표현 스크립트

조건

• 1. table을 div로 감싸주고 div에 클래스를 부여
• 2. div 클래스로 여러형태의 라운드 지정 가능
• 3. table의 margin=0, width=100%로 지정 (필수)
• 4. 라운드 클래스의 4개의 div의 스타일을 미리 정의해 줘야함.
• 5. 라운드가 클 경우 셀안의 내용을 덮어버릴수 있으니... 투명gif를 적절히 이용하는 센스!
• 6. 현재 safari에서 깨짐현상 있음 -_-;

<div class="round1">
	<table>
		<tr>
			<td>test</td>
			<td>test</td>
			<td>test</td>
		</tr>
		<tr>
			<td>test</td>
			<td>test</td>
			<td>test</td>
		</tr>
	</table>
</div>
<script type="text/javascript">roundConer("round1");</script>

<div class="round2">
	<table>
		<tr>
			<td>test</td>
			<td>test</td>
			<td>test</td>
		</tr>
	</table>
</div>
<script type="text/javascript">roundConer("round2");</script>

function addClass(element,value) {
	if (!element.className) {
		element.className = value;
	} else {
		newClassName = element.className;
		newClassName += " ";
		newClassName += value;
		element.className = newClassName;
	}
}

function roundConer(classname) {
	var divEl = document.getElementsByTagName("div");
	for (i=0; i<divEl.length; i++) {
		if(divEl[i].className.indexOf(classname) != -1) {
			var wrap = divEl[i];
			wrap.style.position = "relative";
			var tar = wrap.getElementsByTagName("table")[0];	
			wrap.style.width = tar.offsetWidth + "px"
			wrap.style.height = tar.offsetHeight + "px"
			
			var TopLeft = document.createElement("div");
			var TopRight = document.createElement("div");
			var BottomLeft = document.createElement("div");
			var BottomRight = document.createElement("div");
			TopLeft.className = "tl";
			TopRight.className = "tr";
			BottomLeft.className = "bl";
			BottomRight.className = "br";

			wrap.appendChild(TopLeft);
			wrap.appendChild(TopRight);
			wrap.appendChild(BottomLeft);
			wrap.appendChild(BottomRight);

			if (tar.offsetWidth % 2 == 1) {		// IE6 보정
				addClass(TopRight,"right_for6");
				addClass(BottomRight,"right_for6");
			}
			if (tar.offsetHeight % 2 == 1) {
				addClass(BottomLeft,"bottom_for6");
				addClass(BottomRight,"bottom_for6");
			}
		}
	}
}