`

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

jQueryJavaScript
阅读更多 
		<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>
 
分享到：
| 超级巡警 spi链
评论
1 楼 forcer521 2011-04-01  
非常好，收了！！
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jQuery插件 表格奇偶交替，加亮显示

    2. **鼠标移上高亮显示**：当用户将鼠标光标悬停在表格的某一行上时，该行会高亮显示。这提供了一种即时反馈，让用户知道他们当前选中的行，增加了交互性和导航的清晰度。 要实现这些功能，开发者通常会使用jQuery...

    jQuery 图片特效，鼠标经过图标高亮显示

    在这个特定的案例中，“jQuery 图片特效，鼠标经过图标高亮显示”是一种增强用户体验的技术，当用户将鼠标悬停在图标上时，图标会变得更为醒目，吸引用户的注意力并提供视觉反馈。 实现这一效果的基本步骤如下： 1...

    自做jQuery插件----表格(奇偶行不同色,鼠标滑过颜色效果,单击高亮)

    在本项目中，我们主要探讨如何制作一个自定义的jQuery插件，用于实现表格的特殊样式功能，包括奇偶行颜色交替、鼠标滑过时的颜色变化以及单击高亮的效果。这个插件对于提高用户体验和美化网页数据展示具有显著作用。...

    如何用jquery控制表格奇偶行及活动行颜色

    最近用到表格奇偶行不同色，不得不去再看jquery，虽然感觉还是难，但已经不像以前一样无从下手了。做完后不得不来感叹一下jquery真是太牛了，不用自己再写一大堆javascript函数去实现了，简单几句轻松搞定。 先定义...

    jquery动态控制表格的行

    在本主题中，我们将深入探讨如何使用jQuery动态控制表格的行，包括增加行、选中行和删除行。这在构建数据驱动的Web应用时尤其重要，因为用户通常需要与表格进行交互，例如查看、编辑或删除数据。 首先，让我们讨论...

    jquery表格交叉高亮显示.rar

    本主题聚焦于"jquery表格交叉高亮显示"，这通常涉及到在用户交互时，如鼠标悬停或点击，动态改变表格单元格的样式，以突出显示特定的行或列。这种效果在数据可视化和分析中非常有用，因为它可以帮助用户快速识别和...

    jquery实现的可增加，删除行，可多行上下移动表格

    标题 "jquery实现的可增加，删除行，可多行上下移动表格" 描述了一种使用JavaScript库jQuery创建的交互式表格功能。这个功能允许用户在表格中动态添加、删除行，以及上下移动表格中的行，提供了更灵活的数据操作体验...

    jQuery鼠标移动表格变色及修改单元格值

    标题中的“jQuery鼠标移动表格变色及修改单元格值”是指使用jQuery库来实现一个功能，当鼠标在HTML表格上移动时，所经过的单元格会改变颜色，并且用户能够编辑表格中的单元格值。这个功能结合了jQuery的选择器、事件...

    jQuery 鼠标移动到表格变色特效

    总之，"jQuery 鼠标移动到表格变色特效"是一个利用jQuery处理鼠标事件并改变元素样式的实例，通过学习这个例子，开发者可以掌握jQuery的基本用法，了解如何结合CSS实现交互效果，这对于创建动态、响应式的网页界面至...

    jquery实现鼠标移动出现提示信息

    使用 jQuery 实现鼠标移动出现提示信息的功能非常简单易行。我们只需要使用 jQuery 库、监听鼠标移动事件、显示提示信息，并美化提示信息的样式。在线 DEMO 可以帮助我们快速理解和实现这项功能。

    jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果代码

    在这个例子中，我们将深入探讨如何使用jQuery创建一个插件，以实现表格隔行变色以及鼠标滑过时的高亮显示效果。 首先，我们来看一下基本的HTML结构，这里包含了一个简单的表格，用于展示插件的效果： ```html ...

    jquery实现表格隔行换色和鼠标经过提示效果源码

    本篇将详细介绍如何使用jQuery实现表格隔行换色以及鼠标经过时显示提示效果。 首先，我们需要理解jQuery的基本用法。jQuery通过选择器（如`$("#id")`、`$(".class")`或`$("tag")`）找到页面中的元素，然后对这些...

    jQuery+CSS实现图片感应鼠标高亮显示当前图片

    "jQuery+CSS实现图片感应鼠标高亮显示当前图片"是一个常见的交互功能，它使得用户在鼠标悬停于图片上时，图片会自动高亮，突出显示当前被关注的图片，从而增强用户的视觉反馈。下面将详细解释如何使用jQuery和CSS来...

    table鼠标经过时整行变色 jquery

    当我们想要在用户鼠标悬停（mouseover）到表格某一行时，实现整行颜色变化的效果，jQuery提供了解决方案。这不仅能提升用户体验，也能帮助用户更直观地识别出当前关注的数据行。 首先，我们需要在HTML中创建一个...

    鼠标移动DataGrid显示详细信息

    根据提供的标题、描述、标签及部分内容，我们可以了解到这篇文章主要讲述的是如何实现在鼠标移动到 DataGrid 的某一行时，显示出该行的详细信息。DataGrid 是一种常用的 Web 控件，用于展示表格形式的数据。下面我们...

    使用jQuery为表格添加合计行

    使用jQuery为表格添加合计行，方法依赖jQuery,方法中使用到的JQ是jQuery中的$方法的别名

    jQuery高亮选择行

    jQuery高亮选择行,用jQuery做的高亮显示鼠标移动到的行，很简单的，希望对各位有帮助

    77、jquery表格交叉高亮显示

    本话题聚焦于“77、jquery表格交叉高亮显示”，这是一个关于如何使用jQuery来实现表格数据交叉选中时高亮显示的技术点。在数据分析和展示中，交叉高亮能帮助用户更直观地理解和分析表格中的关联信息。 首先，我们...

Magicbox
Global site tag (gtag.js) - Google Analytics