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 相关文章推荐
javascript void(0)的妙用
Oct 21 Javascript
JS.getTextContent(element,preformatted)使用介绍
Sep 21 Javascript
jQuery如何取id有.的值一般的方法是取不到的
Apr 18 Javascript
js在数组中删除重复的元素自保留一个(两种实现思路)
Aug 22 Javascript
javascript中的this详解
Dec 08 Javascript
javascript实现动态改变层大小的方法
May 14 Javascript
基于dropdown.js实现的两款美观大气的二级导航菜单
Sep 02 Javascript
javascript图片预览和上传(兼容IE)
Mar 15 Javascript
基于jquery实现五星好评
Nov 18 jQuery
vue之将echart封装为组件
Jun 02 Javascript
使用proxy实现一个更优雅的vue【推荐】
Jun 19 Javascript
微信小程序项目总结之点赞 删除列表 分享功能
Jun 25 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
两级联动select刷新后其值保持不变的实现方法
2014/01/27 PHP
PHP中echo,print_r与var_dump区别分析
2014/09/29 PHP
php设计模式之代理模式分析【星际争霸游戏案例】
2020/03/23 PHP
js不是基础的基础
2006/12/24 Javascript
javascript之典型高阶函数应用介绍
2013/01/10 Javascript
JavaScript中prototype为对象添加属性的误区介绍
2013/10/15 Javascript
查询json的数据结构的8种方式简介
2014/03/10 Javascript
使用jQuery实现的掷色子游戏动画效果
2014/03/14 Javascript
JS+CSS实现简易实用的滑动门菜单效果
2015/09/18 Javascript
jQuery实现获取绑定自定义事件元素的方法
2015/12/02 Javascript
JSON遍历方式实例总结
2015/12/07 Javascript
JS监听微信、支付宝等移动app及浏览器的返回、后退、上一页按钮的事件方法
2016/08/05 Javascript
详解angularjs利用ui-route异步加载组件
2017/05/21 Javascript
浅谈Vue父子组件和非父子组件传值问题
2017/08/22 Javascript
webpack4.0打包优化策略整理小结
2018/03/30 Javascript
vue拖拽组件使用方法详解
2018/12/01 Javascript
nodejs实现日志读取、日志查找及日志刷新的方法分析
2019/05/20 NodeJs
微信小程序实现文件、图片上传功能
2020/08/18 Javascript
新手入门带你学习JavaScript引擎运行原理
2019/06/24 Javascript
vue-router跳转时打开新页面的两种方法
2019/07/29 Javascript
jQuery三组基本动画与自定义动画操作实例总结
2020/05/09 jQuery
JS实现无限轮播无倒退效果
2020/09/21 Javascript
Python Paramiko模块的安装与使用详解
2016/11/18 Python
Python中定时任务框架APScheduler的快速入门指南
2017/07/06 Python
Python爬虫抓取代理IP并检验可用性的实例
2018/05/07 Python
python 使用poster模块进行http方式的文件传输到服务器的方法
2019/01/15 Python
Python 中的 global 标识对变量作用域的影响
2019/08/12 Python
python 爬虫 实现增量去重和定时爬取实例
2020/02/28 Python
python使用pyecharts库画地图数据可视化的实现
2020/03/25 Python
解决tensorflow/keras时出现数组维度不匹配问题
2020/06/29 Python
python与c语言的语法有哪些不一样的
2020/09/13 Python
使用CSS3的box-sizing属性解决div宽高被内边距撑开的问题
2016/06/28 HTML / CSS
保时捷设计:Porsche Design
2019/03/30 全球购物
俄罗斯GamePark游戏商店网站:购买游戏、游戏机和配件
2020/03/13 全球购物
庆祝教师节活动方案
2014/01/31 职场文书
学生通报表扬范文
2015/05/04 职场文书