<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
table {
width: 800px;
height: 400px;
border: 1px solid #ccc;
border-collapse: collapse;
}
tr,td {
border: 1px solid #ccc;
height: 80px;
}
</style>
</head>
<body>
<table>
<tr>
<td>1111</td>
<td>2222</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<script src="./jquery-1.12.1.min.js"></script>
<script>
//表格的隔行变色
$('tr:odd').css({'background':'pink'})
$('tr:even').css({'background':'skyblue'})
//鼠标移入时给移入的加上一个红色的背景色
$('table tr').on('mouseover',function(e){
var e = e||window.event;
var target = e.target.parentNode;
console.log(target);
target.style.background = 'red'
})
//鼠标移出恢复正常
$('table tr').on('mouseout',function(e){
$('tr:odd').css({'background':'pink'})
$('tr:even').css({'background':'skyblue'})
})
</script>
</body>
</html>
表现
image.png
网友评论