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

iteye_343

于 2010-05-03 22:14:08 发布

阅读量294

点赞数

分类专栏： jquery 文章标签： jQuery JavaScript ViewUI

jquery 专栏收录该内容

10 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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