不小心把自己的帖子搞砸了, 恢复原状,先贴代码。
<script type="text/javascript"
//我这里用的权限名路径,方便解决不同项目名下不会出现找不到资源问题
src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
<style type="text/css">
.yellow {
background: yellow;
}
.red {
background: red;
}
.blue {
background: blue;
}
.green {
background: green;
}
</style>
<title>Insert title here</title>
<script type="text/javascript">
$(function() {
//默认添加颜色 odd 双行 even单行
$("table tr:odd").addClass("red");
$("table tr:even").addClass("yellow");
//out移开 over得到焦点
$("table tr:odd").mouseout(function() {
//拿到当前选中行,并将背景色该更换
$(this).css("background", "red");
});
$("table tr:odd").mouseover(function() {
$(this).css("background", "green");
});
$("table tr:even").mouseout(function() {
$(this).css("background", "yellow");
});
$("table tr:even").mouseover(function() {
$(this).css("background", "blue");
});
})
</script>
</head>
<body>
<table border="1" width="50%">
<tr>
<td>书名</td>
<td>作者</td>
<td>点击量</td>
</tr>
<tr>
<td>圣墟</td>
<td>辰东</td>
<td>10万</td>
</tr>
<tr>
<td>飞剑问道</td>
<td>我吃西红柿</td>
<td>11万</td>
</tr>
<tr>
<td>杀神</td>
<td>逆苍天</td>
<td>22万</td>
</tr>
<tr>
<td>龙王传说</td>
<td>唐家三少</td>
<td>18万</td>
</tr>
<tr>
<td>斗破苍穹</td>
<td>天蚕拖豆</td>
<td>1万</td>
</tr>
</table>
</body>
图片如下