jquery控制表格奇偶行的颜色变化及鼠标移动的高亮显示

最新推荐文章于 2022-08-30 14:22:34 发布

最新推荐文章于 2022-08-30 14:22:34 发布 · 305 阅读

文章标签：

#jQuery #JavaScript #ViewUI

jquery 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了一种使用jQuery库来美化HTML表格的方法，并实现了奇偶行不同的背景颜色效果以及鼠标悬停时的行高亮功能。

		<style>
			<!--
				.even {background:#FFF38F;}
				.odd  {background:#FFFFEE;}
				.selected {background:#0099FF;}
			-->
		</style>
		<script type="text/javascript" src="jquery/jquery-1.3.1.js"></script>
		<script type="text/javascript">
			$(function(){
				$("tbody>tr:odd").addClass("odd");	//为奇数行添加样式
				$("tbody>tr:even").addClass("even");	//为偶数行添加样式
				$("tbody>tr").mouseover(function(){		//鼠标移动的高亮显示
					$(this).addClass("selected");
				}).mouseout(function(){
					$(this).removeClass("selected");
				});
			});

		</script>
	</head>
	<body>
		<table>
			<thead>
				<tr>
					<td>学号</td>
					<td>姓名</td>
					<td>成绩</td>
				</tr>
			</thead>
			
			<tbody>
				<tr>
					<td>1</td>
					<td>Tom</td>
					<td>98</td>
				</tr>

				<tr>
					<td>2</td>
					<td>Jerry</td>
					<td>67</td>
				</tr>

				<tr>
					<td>3</td>
					<td>Tony</td>
					<td>34</td>
				</tr>

				<tr>
					<td>4</td>
					<td>Steven</td>
					<td>89</td>
				</tr>
			</tbody>
		</table>
	</body>