描述:通过jQuery控制表格的奇数行和偶数行的颜色不一样,鼠标经过的时候,颜色变成白色,鼠标离开,颜色恢复原来的颜色。jQuery的版本为1.8
示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>高级隔行变色</title>
<style>
*{
padding: 0;
margin: 0;
}
.form{
width: 500px;
margin: 100px auto 0;
}
table{
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #404060;
width: 500px;
text-align: center;
}
th,td{
border: 1px solid #404060;
padding: 10px;
}
th {
background-color: #09c;
font: bold 16px "微软雅黑";
color: #fff;
}
</style>
<script src="./jquery.min.js"></script>
<script>
$(function () {
var trodd = $(".form tr:odd");
var treven = $(".form tr:even");
trodd.css("background","#a3a3a3");
treven.css("background","#ccc");
//计数器,记录鼠标经过之前的颜色
var color = "";
$(".form tr").mouseenter(function () {
color = $(this).css("background");
$(this).css("background","#fff");
});
$(".form tr").mouseleave(function () {
$(this).css("background",color);
});
});
</script>
</head>
<body>
<div class="form">
<table>
<thead>
<tr>
<th>学号</th>
<th>姓名</th>
<th>成绩</th>
</tr>
</thead>
<tbody class="target">
<tr>
<td>001</td>
<td>赵武</td>
<td>100</td>
</tr>
<tr>
<td>002</td>
<td>赵武</td>
<td>100</td>
</tr>
<tr>
<td>003</td>
<td>赵武</td>
<td>100</td>
</tr>
<tr>
<td>004</td>
<td>赵武</td>
<td>100</td>
</tr>
<tr>
<td>005</td>
<td>赵武</td>
<td>100</td>
</tr>
<tr>
<td>006</td>
<td>赵武</td>
<td>100</td>
</tr>
<tr>
<td>007</td>
<td>赵武</td>
<td>100</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>