<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ex09_traversing</title>
<style>
#tbl1 td {border: 1px solid black; padding: 10px 20px;}
</style>
</head>
<body>
<h1>테이블</h1>
<!-- table#tbl1>tr*10>td{item}*5 -->
<table id="tbl1">
<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 src="../asset/js/jquery-1.12.4.js"></script>
<script>
// <td> * 50개 이벤트 추가
/*
스타일 1
$('#tbl1 td').mouseover(function() {
$(this).css('background-color', 'gold');
});
$('#tbl1 td').mouseout(function() {
$(this).css('background-color', 'transparent');
});
*/
/*
//스타일 2 : 스타일 1 줄인 버전
$('#tbl1 td')
.mouseover(function() {
$(this).css('background-color', 'gold');
});
.mouseout(function() {
$(this).css('background-color', 'transparent');
});
*/
/*
//스타일 3
$('#tbl1 td').on({
mouseover: function() {
$(this).css('background-color', 'gold');
$(event.target).css('background-color', 'gold');
},
mouseout: function() {
$(this).css('background-color', 'transparent');
$(event.target).css('background-color', 'transparent');
}
});
*/
//스타일 3
$('#tbl1 td').on({
mouseover: function() {
$(event.currentTarget).css('background-color', 'gold');
},
mouseout: function() {
$(event.currentTarget).css('background-color', 'transparent');
}
});
</script>
</body>
</html>
