jQuery隔行变色

最新推荐文章于 2021-07-24 11:37:00 发布

せっしょうまる

最新推荐文章于 2021-07-24 11:37:00 发布

阅读量3.7k

点赞数 4

CC 4.0 BY-SA版权

文章标签： jQuery

本文链接：https://blog.youkuaiyun.com/T_Prometheus/article/details/82749037

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script type="text/javascript">
//隔行变色
$(function(){
	$("tr:odd").addClass("odd");
	$("tr:even").addClass("even");
//点击变色 
	$("td").click( function () { 
		$(this).addClass("selected"); 
		});
//光标移入移出变色
$("td").mouseover(function(){
	$(this).addClass("hd");
}).mouseout(function(){
	$(this).removeClass("hd");
});

	});
</script>
<style>
.even{
 background-color:red;
}
.odd{
 background-color:blue;
}
.selected{
 background-color:fuchsia;
}
.hd{
 background-color:yellow;
}
</style>
<body>
<table border="1" width="100%">
		<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>
</html>