jQuery实现表格间隔色

niulanshan

浏览: 565378 次

最近访客更多访客>>

扶起之秀

qijojo

qy86615069

yungaoyue2005

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (1540)

社区版块

存档分类

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>

4、运行http://localhost:8080/jQuery/TableColor.html，结果如下图：