Hover Table
- hover 효과는 마우스 커서가 요소 위에 올라갔을 때 발생하는 시각적인 변화를 의미한다.
- Hover Table은 마우스 커서가 테이블 위에 올라갔을 때 발생하는 시각적인 변화를 의미한다.
🔻호버된 칸의 라인 색 지정하기🔻
기본 뼈대
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#tbl1 {
border: 1px solid black;
border-collapse: collapse;
}
#tbl1 td {
border: 1px solid black;
padding: 10px;
}
</style>
</head>
<body>
<h1>테이블</h1>
<table id="tbl1">
<!-- (tr>td{item}*5)*10 -->
<tr>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
</tr>
<tr>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
</tr>
<tr>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
</tr>
<tr>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
</tr>
<tr>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
</tr>
</table>
</body>
</html>
이벤트
<script>
const table = document.getElementById('tbl1');
//table.tbody.tr들
const tr = table.firstElementChild.children;
console.log(tr);
for (let i=0; i<tr.length; i++) {
tr[i].onmouseover = function() {
event.target.bgColor = 'gold'; //tr에 이벤트를 걸었는데 td의 배경색이 변함
};
}
</script>tr에 이벤트를 걸었는데 td의 배경색이 변했다.
이벤트가 발생된 객체(태그)를 확인하는 방법은 'event.target', 'event.srcElement' 두가지가 있다.
하지만 정확히 말하자면 저 두 가지는 이벤트 발생에 관련 계층 중 최하위 객체 즉, 유턴 객체를 반환하기에 이벤트 발생 객체와 다르게 반환되는 경우가 있다.
정확히 현재 이벤트가 발생된 객체를 확인하는 방법은 'event.currentTarget'이 있다.
event.currentTargetevent.target과 event.currentTarget이 다를 수 있는 경우는 이벤트 버블링이나 캡처링 단계에서 발생한다.
event.target은 이벤트가 실제로 발생한 요소를 가리키고, event.currentTarget은 이벤트 핸들러가 등록된 요소를 가리킨다.
방법 1. - tr[i].bgColor
<script>
// Hover Table
// <tr> 이벤트
const table = document.getElementById('tbl1');
//table.tbody.tr들
const tr = table.firstElementChild.children;
console.log(tr);
for (let i=0; i<tr.length; i++) {
tr[i].onmouseover = function() {
tr[i].bgColor = 'gold';
};
}
</script>지역변수 i는 이미 페이지 로드될 때 소멸되었는데 '클로져' 기능으로 해당 코드가 작동될 수 있다.
단, var 로 선언을 했다면, i는 전역 변수이기에 여전히 살아있다. i는 tr.length보다 큰 값을 가져 for문을 빠져나왔으니 tr를 적용할 수 없고 (Cannot set properties of undefined) 에러가 난다.
하지만 위 코드의 사용을 지양한다.
방법 2. - event.currentTarget
<script>
const table = document.getElementById('tbl1');
//table.tbody.tr들
const tr = table.firstElementChild.children;
console.log(tr);
for (let i=0; i<tr.length; i++) {
tr[i].onmouseover = function() {
event.currentTarget.bgColor = 'gold';
};
tr[i].onmouseout = function() {
event.currentTarget.bgColor = 'transparent';
};
}
</script>
완성 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#tbl1 {
border: 1px solid black;
border-collapse: collapse;
}
#tbl1 td {
border: 1px solid black;
padding: 10px;
}
</style>
</head>
<body>
<h1>테이블</h1>
<table id="tbl1">
<!-- (tr>td{item}*5)*10 -->
<tr>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
</tr>
<tr>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
</tr>
<tr>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
</tr>
<tr>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
</tr>
<tr>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
</tr>
<tr>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
</tr>
<tr>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
</tr>
<tr>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
</tr>
<tr>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
</tr>
<tr>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
</tr>
</table>
<script>
// Hover Table
// <tr> 이벤트
const table = document.getElementById('tbl1');
//table.tbody.tr들
const tr = table.firstElementChild.children;
console.log(tr);
for (let i=0; i<tr.length; i++) {
tr[i].onmouseover = function() {
event.currentTarget.bgColor = 'gold';
};
tr[i].onmouseout = function() {
event.currentTarget.bgColor = 'transparent';
};
}
</script>
</body>
</html>
