JQuery表格样式

不小心把自己的帖子搞砸了, 恢复原状,先贴代码。

<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>

图片如下
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/qq_43227967/article/details/82750993
今日推荐