是不是很漂亮的表格效果，下面是使用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>Hello World jQuery!</title>
<script type="text/javascript" src="scripts/jquery-1.4.2.js"></script>
<!--将jQuery引用进来-->
<script type="text/javascript">
$(document).ready(function(){ //这个就是传说的ready
$(".stripe tr").mouseover(function(){
//如果鼠标移到class为stripe的表格的tr上时，执行函数
$(this).addClass("over");}).mouseout(function(){
//给这行添加class值为over，并且当鼠标一出该行时执行函数
$(this).removeClass("over");}) //移除该行的class
$(".stripe tr:even").addClass("alt");
//给class为stripe的表格的偶数行添加class值为alt
});
</script>
<style type="text/css">
th {
background:#0066FF;
color:#FFFFFF;
line-height:20px;
height:30px;
}
td {
padding:6px 11px;
border-bottom:1px solid #95bce2;
vertical-align:top;
text-align:center;
}
td * {
padding:6px 11px;
}
tr.alt td {
background:#ecf6fc; /*这行将给所有的tr加上背景色*/
}
tr.over td {
background:#bcd4ec; /*这个将是鼠标高亮行的背景色*/
}
</style>
</head>
<body style="background-color: #FFF">
<table class="stripe" width="50%" border="0" cellspacing="0" cellpadding="0">
<!--用class="stripe"来标识需要使用该效果的表格-->
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>QQ</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Java</td>
<td>23</td>
<td>31540205</td>
<td>Java@gmail.com</td>
</tr>
<tr>
<td>Javascript</td>
<td>23</td>
<td>31540205</td>
<td>Javascript@126.com</td>
</tr>
<tr>
<td>jQuery</td>
<td>23</td>
<td>31540205</td>
<td>jquery@gmail.com</td>
</tr>
<tr>
<td>c_cpp</td>
<td>23</td>
<td>31540205</td>
<td>c_cpp@gmail.com</td>
</tr>
<tr>
<td>python</td>
<td>23</td>
<td>31540205</td>
<td>python@gmail.com</td>
</tr>
<tr>
<td>Ruby</td>
<td>23</td>
<td>31540205</td>
<td>Ruby@gmail.com</td>
</tr>
</tbody>
</table>
</body>
</html>
这里有一个jQuery的技巧不得不提一下：jQuery的链式操作，什么是链式操作呢？ 我们来看看，本来应该写
成这样子的：
$(".stripe tr").mouseover(function(){
$(this).addClass("over");})
$(".stripe tr").mouseout(function(){
$(this).removeClass("over"); })
但是我们写成了：
$(".stripe tr").mouseover(function(){
$(this).addClass("over");}).mouseout(function(){
$(this).removeClass("over");})
在jQuery中，执行完mouseover或者mouseout等方法之后，都会返回当前的对象，所以可以进行链式操作
说明：该代码出自于15 Days of jQuery(Day 2)---很容易的制作双色表格，版权归原作者所有
分享到：
相关推荐
标题和描述中提到的知识点主要集中在如何使用jQuery来实现表格的动态样式变化功能，包括隔行换色、移动换色以及点击换色。首先，我们将介绍这些效果的实现原理和技术细节。 ### 1. jQuery基础知识 jQuery是一个快速...
其中，操作表格（table）的视觉样式如隔行换色和鼠标经过变色是前端开发者经常要处理的场景。接下来，我们将从技术角度详细解读如何使用jQuery实现这两种效果。 首先，我们讨论如何实现table的隔行换色。隔行换色的...
综上所述，实现"jquery table鼠标滑过隔行变色表格样式代码"涉及到HTML表格布局、CSS样式设计、jQuery选择器与事件处理等多方面知识。通过合理运用这些技术，我们可以创建出更具有吸引力和易用性的数据展示界面。在...
总的来说，jQuery的`hover`事件和`each`方法提供了灵活且高效的方式来处理元素的悬停行为，尤其是对于表格隔行换色的需求。开发者可以根据项目需求选择最适合的方法，以提升网页的交互性和美观性。
这个教程主要介绍了一个基于jQuery的小插件，用于实现表格（table）和div元素的隔行变色以及鼠标悬停时的颜色变化效果。jQuery是一个广泛使用的JavaScript库，它简化了DOM操作、事件处理、动画和Ajax交互，使得网页...
在网页设计中，为了提升数据展示的可读性和美观性，常常会采用隔行变色的技巧来对表格进行美化。隔行变色使得用户在查看大量数据时能更容易地区分每一行，从而减轻视觉疲劳，提高阅读效率。本文将详细讲解如何实现...
接着，在文档的 `<body>` 标签底部，我们引入了 `jquery-1.9.1.js`（jQuery 1.9.1 版本）和 `bootstrap.min.js`，这两个文件分别是 jQuery 库和 Bootstrap 的 JavaScript 插件，它们提供了交互和动态效果的支持。...
然后，使用jQuery选择器和事件处理函数来实现隔行变色和光棒效果： ```javascript $(document).ready(function(){ $(".gridview tr:odd").addClass("odd"); $(".gridview tr:even").addClass("even"); $("....
同时，还设置了悬停时的背景色，以便于用户在鼠标移动到某行时能清楚地感知。 JSON文件是后端数据源，包含了一个对象数组，每个对象表示表格的一行数据。在这个例子中，每行数据有`ID`、`name`、`description`和`...
1、功能需求：表格中数据隔行变色、删除数据、全选删除、鼠标移动到图片时显示图片预览 2、示例代码如下： 代码如下: <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”> <HTML> <HEAD&...
- **.table-striped：** 隔行显示不同颜色以区分行。 - **.table-bordered：** 为表格添加边框。 - **.table-hover：** 鼠标悬停时改变行的颜色。 - **.table-condensed：** 减少单元格内的填充空间，使表格更紧凑。...