http://bbs.blueidea.com/thread-2853109-1-1.html
jQuery新手教程，高手勿笑。
————————————————————
为了能够更清晰的显示表格中的数据，使用双色表格来显示数据的例子已经屡见不鲜了。我们通常都是使用JavaScript来实现这种效果，可是你知道jQuery中该如何做吗？用jQuery的语句重复JavaScript实现方法吗？不，其实jQuery已经为我们准备好了一切。
先来看看最终的效果是什么样子：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>用jQuery实现表格颜色的交替显示</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery(".truecolor tr:odd").addClass("color1");
jQuery(".truecolor tr:even").addClass("color2");
jQuery(".truecolor tr").hover(function(){
jQuery(this).addClass("color3")
},function(){
jQuery(this).removeClass("color3")
});
});
</script>
<style type="text/css">
.truecolor {border:1px solid #333;text-align:center;}
.truecolor th {background-color:#333; color:#FFF;}
.color1 {background-color:#DDD; color:#333;}
.color2 {background-color:#EEE; color:#333;}
.color3 {background-color:#666; color:#FFF;}
</style>
</head>
<body>
<table width="450" class="truecolor">
<thead>
<tr>
<th>博客</th>
<th>作者</th>
<th>网址</th>
</tr>
</thead>
<tbody>
<tr>
<td>风格之舞</td>
<td>火德</td>
<td>www.style5.cn</td>
</tr>
<tr>
<td>赵雷的博客</td>
<td>赵雷</td>
<td>zhaolei.asia</td>
</tr>
<tr>
<td>寂寞广场</td>
<td>魏春亮</td>
<td>weiliang86.blogcn.com</td>
</tr>
<tr>
<td>淘宝UED</td>
<td>淘宝</td>
<td>ued.taobao.com</td>
</tr>
</tbody>
</table>
</body>
</html>
现在我要告诉你的是，仅仅三句jQuery代码就实现了上面的效果，是不是很酷？下面我详细的讲一讲如何用jQuery来实现它：
首先建立表格的结构，别忘了给表格定义一个class，我这里定义的class名为truecolor。
复制内容到剪贴板
代码:
<table width="450" class="truecolor">
<thead>
<tr>
<th>博客</th>
<th>作者</th>
<th>网址</th>
</tr>
</thead>
<tbody>
<tr>
<td>风格之舞</td>
<td>火德</td>
<td>www.style5.cn</td>
</tr>
<tr>
<td>赵雷的博客</td>
<td>赵雷</td>
<td>zhaolei.asia</td>
</tr>
<tr>
<td>寂寞广场</td>
<td>魏春亮</td>
<td>weiliang86.blogcn.com</td>
</tr>
<tr>
<td>淘宝UED</td>
<td>淘宝</td>
<td>ued.taobao.com</td>
</tr>
</tbody>
</table>
下面是CSS部分，为表格的不同状态定义样式。
复制内容到剪贴板
代码:
<style type="text/css">
.truecolor {border:1px solid #333;text-align:center;} /* 非关键部分：给表格加个边框 */
.truecolor th {background-color:#333; color:#FFF;} /* 非关键部分：给表头定义样式 */
.color1 {background-color:#DDD; color:#333;} /* 关键部分：定义tr的第一种样式 */
.color2 {background-color:#EEE; color:#333;} /* 关键部分：定义tr的第二种样式 */
.color3 {background-color:#666; color:#FFF;} /* 关键部分：定义tr在鼠标悬浮状态的样式 */
</style>
现在样式定义好了，那么怎么把样式应用到表格上呢？下面进入最关键的jQuery部分。
复制内容到剪贴板
代码:
/*
* 请确保你已经在之前引入了jQuery的js文件
* 我这里是使用Wordpress自带的jQuery
* 为避免框架的冲突，我在这里使用jQuery()而不是$()
*/
jQuery(document).ready(function(){
jQuery(".truecolor tr:odd").addClass("color1");
// 选择class为.truecolor的对象中的单数行，为该行添加.color1样式
jQuery(".truecolor tr:even").addClass("color2");
// 选择class为.truecolor的对象中的双数行，为该行添加.color2样式
jQuery(".truecolor tr").hover(function(){
jQuery(this).addClass("color3")
},function(){
jQuery(this).removeClass("color3")
});
// 格式为：jQuery选取对象.hover(鼠标移到对象触发的函数,鼠标移出对象触发的函数);
// 鼠标over时，添加.color3样式；鼠标out时，移除.color3样式
});
OK，现在已经大功告成了，快去试试效果吧！
从这个小例子中可以看到jQuery强大的DOM选择器和方便的事件处理，希望你会从此爱上jQuery！
个人签名
-------------------------------------
图盾 淘宝保护 保护图片 图片防盗
分享到：
相关推荐
jquery表格变色jquery表格变色jquery表格变色jquery表格变色jquery表格变色jquery表格变色jquery表格变色jquery表格变色jquery表格变色jquery表格变色jquery表格变色jquery表格变色
本主题涉及的是使用jQuery实现的一种常见的用户界面优化技巧——"表格隔行变色"以及"鼠标滑过时竖直表格内容变色效果"。这种效果可以提升表格的可读性，使得数据更加清晰易辨。 首先，我们来讨论“表格隔行变色”。...
在“jquery 框选变色”这个主题中，我们将探讨如何利用jQuery实现对HTML表格（table）中的选定单元格（td）进行颜色变化的功能。 首先，我们需要理解HTML表格的基本结构。一个表格由`<table>`元素定义，内部包含行`...
标题中的“jQuery鼠标移动表格变色及修改单元格值”是指使用jQuery库来实现一个功能，当鼠标在HTML表格上移动时，所经过的单元格会改变颜色，并且用户能够编辑表格中的单元格值。这个功能结合了jQuery的选择器、事件...
本主题聚焦于“jQuery table选中表格行变色”这一功能，它在交互式网页设计中尤为常见，可以提升用户体验。下面将详细介绍如何使用jQuery实现这个功能。 首先，我们需要一个基本的HTML表格结构，例如： ```html ...
总之，"jQuery 鼠标移动到表格变色特效"是一个利用jQuery处理鼠标事件并改变元素样式的实例，通过学习这个例子，开发者可以掌握jQuery的基本用法，了解如何结合CSS实现交互效果，这对于创建动态、响应式的网页界面至...
总的来说，这个"jQuery Table点击选中表格行变色代码"是一个基础的用户交互示例，展示了如何结合jQuery的事件处理和CSS样式来增强用户体验。在实际项目中，开发者需要根据具体需求进行扩展和优化，例如增加数据驱动...
"jQuery选取商品隔行变色"是一个常见的网页交互功能，主要用于电商网站的商品列表展示，使得用户在浏览长列表时能更清晰地区分各个项目。下面将详细解释如何使用jQuery实现这一功能。 首先，我们需要理解jQuery库的...
在探讨如何使用JavaScript结合jQuery库实现表格的一些交互效果之前，我们先要了解一些基础知识点。 首先，JavaScript是一种广泛用于网页客户端编程的脚本语言，它让网页能够拥有更动态和交互性的特性。而jQuery是一...
本教程将详细讲解如何使用jQuery实现一个仿Excel表格的选中变色效果，以增强用户界面的交互性。 首先，我们需要理解jQuery的基本用法。jQuery的核心在于它的选择器，它允许我们高效地选取DOM元素。例如，`$("#...
本资源“jQuery Table选中表格行变色代码.zip”提供了一个实用的功能，即当用户点击表格中的某一行时，该行会变色，以突出显示用户的选择。这个功能在数据展示和交互性较强的网页中十分常见，例如在数据分析、电商...
在网页设计中，为了提升数据可读性和美观性，经常需要对表格进行隔行变色的处理。这种技术主要是通过CSS（层叠样式表）来实现的，使得表格的每一行交替显示不同的背景颜色，从而形成视觉上的区分。在本案例中，"网页...
《jQuery仿Excel表格选中单元格变色特效详解》 在网页开发中，有时我们需要创建类似Excel的功能，比如用户能够选择表格中的单元格，并且选中的单元格有明显的视觉反馈，例如变色。jQuery作为一款强大的JavaScript库...
《锋利的jquery》利用siblings（）,attr（）方法实现表单变色
从给定的文件信息中，我们可以提炼出以下知识点： ### JavaScript表格隔行变色 ...通过上述知识点，我们可以系统地理解如何使用JavaScript和JQuery实现表格隔行变色和Tab标签页特效，以及这些技术在前端开发中的应用。