![[原创]持续给力：jQuery实现表格隔行变色效果案例详解](https://1500zi.500zi.com/uploadfile/img/15/352/3b96ecf103014c700a07edf48236508f.jpg)
本案例源码jQeruy0323.rar
由于这几天忙着给学生出卷、测试等相关工作，导致这几天博客没有更新太多的东西，从本周开始我会持续的原创一些jQuery方面的文章，也请大家继续关注，我的宗旨是只要发文，一定附上源代码，供各位大本营的朋友免费下载，也请大家转载的时候注明出处
jQuery是什么？不少同学可能会知道一些，但是可能还不是很全面，下面是给大家详细的先阐述一下基本概念：
JQuery是继prototype之后又一个优秀的Javascrīpt框架。它是轻量级的js库(压缩后只有21k) ，它兼容CSS3，还兼容各种浏览器 （IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）。jQuery使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。jQuery能够使用户的html页保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需定义id即可。
关于jQuery更基础的东西，我会随后发出一些JQuery的基础笔记。请大家关注...
闲话不多说了，要实现表格的隔行变色并不难，可以用多种方法实现，比如：用CSS+div、javascript、jquery等，那下面我们就用javascript dom方法和jQuery的方法来实现。
先看下效果图：
使用javascript Dom 的方法实现效果
8 分钟前 上传下载附件(25.41 KB)
使用jquery方法实现表格的隔行变色效果
6 分钟前 上传下载附件(29.73 KB)
js dom 方法实现源码如下： Code: <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><title>无标题文档</title><style>.one{background-color:#FFFF99;}.two{background-color:#00CC66;}.over{background-color:#FF6600;}</style></head><bodyοnlοad="tableBg();"><tableid="tab"width="503"height="108"border="1"cellpadding="0"cellspacing="0"><caption>jsDom实现表格的隔行变色</caption><tr><th>ID</th><th>姓名</th><th>性别</th><th>年龄</th><th>专业</th></tr><tr><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td></tr></table></body></html><scriptlanguage="javascript"type="text/javascript">varoldclass;functiontableBg(){vartab=document.getElementById("tab");vartr=tab.rows;for(vari=1;i<tr.length-1;i++){if(i%2==1){tr[i].className="one";}else{tr[i].className="two";}//鼠标移动上方的事件tr[i].οnmοuseοver=function(){//将当前的颜色暂存在oldclassoldclass=this.className;//改变颜色；this.className="over";}tr[i].οnmοuseοut=function(){//还原背景颜色this.className=oldclass;}}}</script>
jQuery实现代码：
Code: <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="/1999/xhtml"><head><style>.one{background-color:#FFFFCC;}.two{background-color:#66CC66;}.over{background-color:#FF00FF;}</style><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><scriptlanguage="javascript"type="text/javascript"src="../include/jquery-1.5.1.min.js"></script><scriptlanguage="javascript"type="text/javascript">$(document).ready(function(){$("#tabtr:even").addClass("one");$("#tabtr:odd").addClass("two");$("#tabtr").mouseover(function(){$(this).addClass("over");});$("#tabtr").mouseout(function(){$(this).removeClass("over");});});</script><title>无标题文档</title></head><body><tableid="tab"width="503"height="108"border="1"cellpadding="0"cellspacing="0"><caption>jQuery实现表格的隔行变色</caption><tr><th>ID</th><th>姓名</th><th>性别</th><th>年龄</th><th>专业</th></tr><tr><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td></tr></table></body></html>
本案例源码jQeruy0323.rar
[原创地址][源码下载] [更多原创，多多支持多]
