HTML
37일차//JQuery// 테이블에 tr마우스올릴시 색상변환(this) // .css( )
aesup
2021. 3. 5. 12:59
728x90
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src = "https://code.jquery.com/jquery-3.5.1.min.js"></script>
<style type="text/css">
.back{
color: #ffff00;
}
</style>
</head>
<body>
<div align="center">
<table border = "1">
<col width = "50">
<col width = "100">
<col width = "100">
<tr>
<th>번호</th><th>이름</th><th>나이</th>
</tr>
<tr class = "one">
<th>1</th><td>이수빈</td><td>25</td>
</tr>
<tr class = "one">
<th>2</th><td>주지훈</td><td>40</td>
</tr>
<tr class = "one">
<th>3</th><td>강동원</td><td>40</td>
</tr>
</table>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('tr.one').mouseover(function name() {
$(this).css('background','pink');
});
$('tr.one').mouseout(function name() {
$(this).css('background','white');
});
});
</script>
</body>
</html>
728x90