微客导航 » 文章资讯 » jQuery实现表格颜色交替显示的方法

jQuery实现表格颜色交替显示的方法

2024-04-03 15:59:03 428

本文实例讲述了jQuery实现表格颜色交替显示的方法。分享给大家供大家参考。具体实现方法如下：

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

<head>

<title>jQuery实现表格颜色的交替显示</title>

<scripttype="text/javascript"src="js/jquery1.3.2.js"></script>

<scripttype="text/javascript">

jQuery(document).ready(function(){

 jQuery(".truecolortr:odd").addClass("color1");

 jQuery(".truecolortr:even").addClass("color2");

 jQuery(".truecolortr").hover(function(){

   jQuery(this).addClass("color3")

 },function(){

   jQuery(this).removeClass("color3")

 });

});

</script>

<styletype="text/css">

.truecolor{border:1pxsolid#333;text-align:center;}

.truecolorth{background-color:#333;color:#FFF;}

.color1{background-color:#DDD;color:#333;}

.color2{background-color:#EEE;color:#333;}

.color3{background-color:#666;color:#FFF;}

</style>

</head>

<body>

<tablewidth="450"class="truecolor">

 <thead>

   <tr>

     <th>博客</th>

     <th>作者</th>

     <th>网址</th>

   </tr>

 </thead>

 <tbody>

   <tr>

     <td>风格之舞</td>

     <td>火德</td>

     <td>隔行换色</td>

   </tr>

   <tr>

     <td>赵雷的博客</td>

     <td>赵雷</td>

     <td>新浪微博</td>

   </tr>

   <tr>

     <td>寂寞广场</td>

     <td>魏春亮</td>

     <td>同学录</td>

   </tr>

   <tr>

     <td>淘宝UED</td>

     <td>淘宝</td>

     <td>经常购物</td>

   </tr>

 </tbody>

</table>

</body>

</html>

希望本文所述对大家的jQuery程序设计有所帮助。

返回顶部
3162201930
czq8825@qq.com

jQuery实现表格颜色交替显示的方法

热门推荐

随机推荐