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 相关文章推荐
利用jQuery的$.event.fix函数统一浏览器event事件处理
Dec 21 Javascript
js nextSibling属性和previousSibling属性概述及使用注意
Feb 16 Javascript
js操作checkbox遇到的问题解决
Jun 29 Javascript
可以浮动某个物体的jquery控件用法实例
Jul 24 Javascript
JavaScript数据结构与算法之集合(Set)
Jan 29 Javascript
前端编码规范(3)JavaScript 开发规范
Jan 21 Javascript
angularjs实现下拉列表的选中事件示例
Mar 03 Javascript
基于JavaScript实现飘落星星特效
Aug 10 Javascript
JavaScript实现图片拖曳效果
Sep 08 Javascript
js+html5实现手机九宫格密码解锁功能
Jul 30 Javascript
详解react native页面间传递数据的几种方式
Nov 07 Javascript
微信小程序中的列表切换功能实例代码详解
Jun 09 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动态生成VRML网页
2006/10/09 PHP
为PHP初学者的8点有效建议
2010/11/20 PHP
支持中文的php加密解密类代码
2011/11/27 PHP
PHP中运用jQuery的Ajax跨域调用实现代码
2012/02/21 PHP
php中的curl使用入门教程和常见用法实例
2014/04/10 PHP
php使用smtp发送支持附件的邮件示例
2014/04/13 PHP
tp5实现微信小程序多图片上传到服务器功能
2018/07/16 PHP
PHP关于foreach复制知识点总结
2019/01/28 PHP
php常用的工具开发整理
2019/09/26 PHP
PHP使用gearman进行异步的邮件或短信发送操作详解
2020/02/27 PHP
php7 图形用户界面GUI 开发示例
2020/02/22 PHP
不用MOUSEMOVE也能滑动啊
2007/05/23 Javascript
通过XMLHttpRequest和jQuery实现ajax的几种方式
2015/08/28 Javascript
JavaScript基础——使用Canvas绘图
2016/11/02 Javascript
jQuery+HTML5实现弹出创意搜索框层
2016/12/29 Javascript
深入理解Angularjs向指令传递数据双向绑定机制
2016/12/31 Javascript
Angular2开发环境搭建教程之VS Code
2017/12/15 Javascript
vue的style绑定background-image的方式和其他变量数据的区别详解
2018/09/03 Javascript
Vue.js@2.6.10更新内置错误处机制Fundebug同步支持相应错误监控
2019/05/13 Javascript
Vue实战教程之仿肯德基宅急送App
2019/07/19 Javascript
详解基于Vue的支持数据双向绑定的select组件
2019/09/02 Javascript
分析在Python中何种情况下需要使用断言
2015/04/01 Python
python使用xlrd模块读取xlsx文件中的ip方法
2019/01/11 Python
Python操作Sonqube API获取检测结果并打印过程解析
2019/11/27 Python
python 安装库几种方法之cmd,anaconda,pycharm详解
2020/04/08 Python
Python openpyxl模块实现excel读写操作
2020/06/30 Python
python实现文件+参数发送request的实例代码
2021/01/05 Python
VICHY薇姿美国官方网站:欧洲药房第一的抗衰老品牌
2017/11/22 全球购物
英国顶级水晶珠宝零售商之一:Tresor Paris
2019/04/27 全球购物
Armor Lux法国官方网站:水手服装、成衣和内衣
2020/05/26 全球购物
秋季婚礼证婚词
2014/01/11 职场文书
安全生产检查通报
2014/01/29 职场文书
商业项目策划方案
2014/06/05 职场文书
中国现代文学之经典散文三篇
2019/09/18 职场文书
Vue2.0搭建脚手架
2022/03/13 Vue.js
Golang 链表的学习和使用
2022/04/19 Golang