jquery实现表格隔行换色效果

 更新时间:2015年11月19日 10:36:16   作者:翱翔天地  
下面一个示例为大家详细介绍下使用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程序设计有所帮助。

相关文章

  • jQuery中element选择器用法实例

    jQuery中element选择器用法实例

    这篇文章主要介绍了jQuery中element选择器用法,实例分析了element选择器的功能、定义及相关的操作技巧,具有一定的参考借鉴价值,需要的朋友可以参考下
    2014-12-12
  • jquery控制listbox中项的移动并排序

    jquery控制listbox中项的移动并排序

    以下是用jquery控制ASP.NET中的两个asp:listbox控件中选择项的移动。
    2009-11-11
  • jQuery实现消息滚动播放效果

    jQuery实现消息滚动播放效果

    这篇文章主要为大家详细介绍了jQuery实现消息滚动播放效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-02-02
  • 基于jQuery制作迷你背词汇工具

    基于jQuery制作迷你背词汇工具

    jQuery提供的Load的函数可能可以说是实现ajax功能的最轻巧的方法。
    2010-07-07
  • jQuery实现删除li节点的方法

    jQuery实现删除li节点的方法

    这篇文章主要介绍了jQuery实现删除li节点的方法的相关资料,需要的朋友可以参考下
    2016-12-12
  • jQuery团购倒计时特效实现方法

    jQuery团购倒计时特效实现方法

    这篇文章主要介绍了jQuery团购倒计时特效实现方法,可实现相对固定时间的倒计时效果,非常具有实用价值,需要的朋友可以参考下
    2015-05-05
  • jQuery简单实现banner图片切换

    jQuery简单实现banner图片切换

    本篇文章主要是对使用jQuery简单实现banner图片切换的示例代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-01-01
  • jQuery实现冻结表格行和列

    jQuery实现冻结表格行和列

    本文给大家分享的是前些日子做的项目中的一个客户的特殊要求,很少遇到,查询了好久的度娘,才算找到解决方案,这里分享给大家,有需要的小伙伴可以参考下。
    2015-04-04
  • jQuery实现对无序列表的排序功能(附demo源码下载)

    jQuery实现对无序列表的排序功能(附demo源码下载)

    这篇文章主要介绍了jQuery实现对无序列表的排序功能,涉及jQuery与javascript常见的文本操作函数与sort排序函数的相关使用方法,具有一定参考借鉴价值,需要的朋友可以参考下
    2016-06-06
  • jQuery autocomplete插件修改

    jQuery autocomplete插件修改

    如果你不知道什么是jQuery autocomplete插件,请看图。你可以测试一下本站的搜索。当然也可以百度一下。
    2009-04-04

最新评论