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