jquery实现表格隔行换色效果

作者：bea

本文实例讲述了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 Transiti

本文实例讲述了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实现表格隔行换色效果

猜你喜欢

您可能感兴趣的文章: