jquery实现表格隔行换色效果

本文实例讲述了jquery实现表格隔行换色效果的代码。分享给大家供大家参考。具体如下：运行效果截图如下：

具体代码如下：

1、新建一个网项目，jQuery2,在网络内容目录下新建脚本文件夹，将jquery-1.10.1.js复制到脚本中；3、同样，新建TableColor.html；TableColor.html:

！DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN ' ' http://www .w3。org/TR/HTML 4/松散。DTD ' HTML头元http-equiv=' Content-Type ' Content=' text/HTML；charset=UTF-8 '标题表格间隔色/title脚本类型=' text/JavaScript ' src=' http : script/jquery-1。10 .1 .js /脚本样式类型=' text/CSS '正文{ width :100%；高度：100%;font-size :12 px}表格{宽度：80%；高度：90%;} .tr _ odd { background: # EBF2FE}。tr _ even { background : # B4 CDE 6；} .tab _ body { text-align : center；}/style script type=' text/JavaScript ' $(function(){ $(' tr : odd ').addCLaSS(' tr _ odd ')；$('tr:even ').addCLaSS(' tr _ even ')；});/script/head body table tr style=' background : # CCCCCC；文本对齐：中心泰国(泰国)学号/th姓名/th年龄/th性别/th/tr tr class=' tab _ body ' TD 2013060101/TD TD TD张华TD/td23/TD男/TD/tr/tr class=' tab _ body ' TD 2013060102/TD TD TD赵雪TD/td24/TD女/TD/tr/tr class=' tab _ body ' TD 2013060103/TD TD TD孙旭TD/td21/TD男/TD/tr/tr class=' tab _ body ' TD 2013060104/TD TD TD李姝TD/td20/TD女/TD/tr/tr class=' tab _ body ' TD 2013060105/TD TD TD公孙旭TD/td22/TD男/TD/tr/tr class=' tab _ body ' TD 2013060106/TD TD TD李枝花TD/td24/TD女/TD/tr/tr class=' tab _ body ' TD 2013060107/TD TD TD魏征TD/td22/TD男/TD/tr/tr class=' tab _ body ' TD 2013060108/TD TD TD施礼TD/td20/TD女/TD/tr/tr class=' tab _ body ' TD 2013060109/TD TD TD王志TD/td23/TD男/TD/tr/tr class=' tab _ body ' TD 2013060104/TD TD TD方小许TD/td20/TD女/td /tr /table /body /html以上就是本文的全部内容，希望对大家学习爪哇岛描述语言程序设计有所帮助。