I/T/JavaScript2009.04.27 22:24
※ 이 글은 이전 제 블로그에 있던 글을 옮겨 놓은겁니다.

아래 예제는 table의 tr 태그에서 onclick과 onmouseover 이벤트를 처리하는 예제에요.
우리가 보통 게시판을 출력할 때 테이블을 자주 쓰고, 그 때 게시물 제목을 누르면 게시글이 읽어지도록 만들고 있죠.
그런데 tr 태그 자체적으로도 그런 기능을 줄 수가 있어요~
그리고 마우스 이벤트에 따라서 마우스를 오버 했을 때 색상이 변하게도 할 수 있구요.

아래 코드를 복사 한 후에 마우스롤 테이블의 row 위에 올려보세요. 그럼 row의 색상이 바뀔꺼고,
마우스를 클릭하면 tr태그의 id 값이 출력 될꺼에요.
JavaScript를 호출할 때 this라는 걸로 파라미터를 넘겨주는데, 이건 자기자신 즉 tr을 넘겨주겠다는 뜻 입니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
		<title>Table(tr) Event</title>
		<script type="text/javascript">
			function changeTrColor(trObj, oldColor, newColor) {
				trObj.style.backgroundColor = newColor;
				trObj.onmouseout = function(){
					trObj.style.backgroundColor = oldColor;
				}
			}

			function clickTrEvent(trObj) {
				alert(trObj.id);
			}
		</script>
	</head>
	<body>
		<table border="1">
			<tr id="firstRow" onclick="javascript:clickTrEvent(this)"
				onmouseover="javascript:changeTrColor(this, '#FFFFFF', '#F4FFFD')"
				style="cursor:hand">
				<td>first row - 1</td>
				<td>first row - 2</td>
			</tr>
			<tr id="secondRow" onclick="javascript:clickTrEvent(this)"
				onmouseover="javascript:changeTrColor(this, '#FFFFFF', '#F4FFFD')"
				style="cursor:hand">
				<td>second row - 1</td>
				<td>second row - 2</td>
			</tr>
			<tr id="thirdRow" onclick="javascript:clickTrEvent(this)"
				onmouseover="javascript:changeTrColor(this, '#FFFFFF', '#F4FFFD')"
				style="cursor:hand">
				<td>third row - 1</td>
				<td>third row - 2</td>
			</tr>
		</table>
	</body>
</html>

저작자 표시 비영리 변경 금지
신고

'I/T > JavaScript' 카테고리의 다른 글

Javascript Array 사용법  (0) 2009.09.24
Javascript switch문 사용법  (0) 2009.06.16
Javascript if문 사용법  (0) 2009.06.16
Javascript for문 사용법  (0) 2009.06.16
JavaScript Select 이벤트 처리  (1) 2009.04.27
JavaScript <tr>태그, onclick 과 onmouseover 이벤트 처리  (0) 2009.04.27
Posted by 황타

티스토리 툴바