jquery实现表格隔行换色效果


Posted in Javascript onNovember 19, 2015

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

jquery实现表格隔行换色效果

具体代码如下:

1、新建一个web项目,jQuery;
2、在WebContent目录下新建script文件夹,将jquery-1.10.1.js复制到script中;
3、同样,新建TableColor.html;
TableColor.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title>表格间隔色</title> 
<script type="text/javascript" src="script/jquery-1.10.1.js"></script> 
<style type="text/css"> 
  body 
  { 
   width:100%; 
   height:100%; 
   font-size:12px; 
  } 
  table 
  { 
   width:80%; 
   height:90%; 
  } 
  .tr_odd 
  { 
   background: #EBF2FE; 
  } 
  .tr_even 
  { 
   background: #B4CDE6; 
  } 
  .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;text-align: center;"> 
    <th>学号</th> 
    <th>姓名</th> 
    <th>年龄</th> 
    <th>性别</th> 
   </tr> 
   <tr class="tab_body"> 
    <td>2013060101</td> 
    <td>张华</td> 
    <td>23</td> 
    <td>男</td> 
   </tr> 
   <tr class="tab_body"> 
    <td>2013060102</td> 
    <td>赵雪</td> 
    <td>24</td> 
    <td>女</td> 
   </tr> 
   <tr class="tab_body"> 
    <td>2013060103</td> 
    <td>孙旭</td> 
    <td>21</td> 
    <td>男</td> 
   </tr> 
   <tr class="tab_body"> 
    <td>2013060104</td> 
    <td>李姝</td> 
    <td>20</td> 
    <td>女</td> 
   </tr> 
   <tr class="tab_body"> 
    <td>2013060105</td> 
    <td>公孙旭</td> 
    <td>22</td> 
    <td>男</td> 
   </tr> 
   <tr class="tab_body"> 
    <td>2013060106</td> 
    <td>李枝花</td> 
    <td>24</td> 
    <td>女</td> 
   </tr> 
   <tr class="tab_body"> 
    <td>2013060107</td> 
    <td>魏征</td> 
    <td>22</td> 
    <td>男</td> 
   </tr> 
   <tr class="tab_body"> 
    <td>2013060108</td> 
    <td>施礼</td> 
    <td>20</td> 
    <td>女</td> 
   </tr> 
   <tr class="tab_body"> 
    <td>2013060109</td> 
    <td>王志</td> 
    <td>23</td> 
    <td>男</td> 
   </tr> 
   <tr class="tab_body"> 
    <td>2013060104</td> 
    <td>方小许</td> 
    <td>20</td> 
    <td>女</td> 
   </tr> 
  </table> 
</body> 
</html>

以上就是本文的全部内容,希望对大家学习javascript程序设计有所帮助。

Javascript 相关文章推荐
flexigrid 类似ext grid的JS表格代码
Jul 17 Javascript
用Mootools获得操作索引的两种方法分享
Dec 12 Javascript
jqGrid随窗口大小变化自适应大小的示例代码
Dec 28 Javascript
fixedBox固定div漂浮代码支持ie6以上大部分主流浏览器
Jun 26 Javascript
5种处理js跨域问题方法汇总
Dec 04 Javascript
jQuery进行组件开发完整实例
Dec 15 Javascript
js判断输入字符串是否为空、空格、null的方法总结
Jun 14 Javascript
JS运动特效之完美运动框架实例分析
Jan 24 Javascript
vue--点击当前增加class,其他删除class的方法
Sep 15 Javascript
JavaScript继承的特性与实践应用深入详解
Dec 30 Javascript
node.js命令行教程图文详解
May 27 Javascript
vue中利用iscroll.js解决pc端滚动问题
Feb 15 Javascript
javascript设计简单的秒表计时器
Sep 05 #Javascript
跟我学习javascript的定时器
Nov 19 #Javascript
分享纯手写漂亮的表单验证
Nov 19 #Javascript
javascript获取系统当前时间的方法
Nov 19 #Javascript
jQuery-1.9.1源码分析系列(十)事件系统之事件体系结构
Nov 19 #Javascript
javascript电商网站抢购倒计时效果实现
Nov 19 #Javascript
跟我学习javascript的Date对象
Nov 19 #Javascript
You might like
php中对xml读取的相关函数的介绍一
2008/06/05 PHP
php实现处理输入转义字符的代码
2015/11/08 PHP
PHP并发场景的三种解决方案代码实例
2021/02/27 PHP
Javascript实例教程(19) 使用HoTMetal(4)
2006/12/23 Javascript
html中的input标签的checked属性jquery判断代码
2012/09/19 Javascript
javascript回车完美实现tab切换功能
2014/03/13 Javascript
javascript实现随时变化着的背景颜色
2015/04/02 Javascript
node.js require() 源码解读
2015/12/13 Javascript
JS清除文本框内容离开在恢复及鼠标离开文本框时触发js的方法
2016/01/12 Javascript
Bootstrap每天必学之导航条(二)
2016/03/01 Javascript
jQuery实现手机版页面翻页效果的简单实例
2016/10/05 Javascript
详解JavaScript数组过滤相同元素的5种方法
2017/05/23 Javascript
JS实现的找零张数最小问题示例
2017/11/28 Javascript
vue2.0+koa2+mongodb实现注册登录
2018/04/10 Javascript
vue项目中vue-i18n和element-ui国际化开发实现过程
2018/04/25 Javascript
通过JS深度判断两个对象字段相同
2019/06/14 Javascript
jquery实现直播视频弹幕效果
2020/02/25 jQuery
javascript实现画板功能
2020/04/12 Javascript
[00:48]完美“圣”典2016风云人物:xiao8宣传片
2016/11/30 DOTA
[01:03:51]2018DOTA2亚洲邀请赛 4.7 淘汰赛 VP vs LGD 第三场
2018/04/09 DOTA
Python实现合并字典的方法
2015/07/07 Python
Python画图学习入门教程
2016/07/01 Python
浅谈python中copy和deepcopy中的区别
2017/10/23 Python
python+pyqt实现12306图片验证效果
2017/10/25 Python
详解Django之admin组件的使用和源码剖析
2018/05/04 Python
Python numpy实现二维数组和一维数组拼接的方法
2018/06/05 Python
Window 64位下python3.6.2环境搭建图文教程
2018/09/19 Python
python3实现表白神器
2019/04/09 Python
Python socket 套接字实现通信详解
2019/08/27 Python
Python3 使用map()批量的转换数据类型,如str转float的实现
2019/11/29 Python
Python爬取你好李焕英豆瓣短评生成词云的示例代码
2021/02/24 Python
纯CSS3实现移动端展开和收起效果的示例代码
2020/04/26 HTML / CSS
全球最大的跑步用品商店:Road Runner Sports
2016/09/11 全球购物
技校毕业生的自我评价
2013/12/27 职场文书
保安部任务及岗位职责
2014/02/25 职场文书
项目备案申请报告
2015/05/15 职场文书