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

2024-09-05 12:20:43

字体：大中小

来源：转载

供稿：网友

jQuery实现表格颜色的交替显示，再此请注意：如果初次打开右下角提示有错误的话，请重新刷新一下网页即可，其实隔行换色不用这么复杂，不过每个人要求换色的形式不同，因此本款仅供参考。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>jQuery实现表格颜色的交替显示</title><script type="text/javascript" src="/ajaxjs/jquery1.3.2.js"></script><script type="text/javascript">jQuery(document).ready(function(){  jQuery(".truecolor tr:odd").addClass("color1");  jQuery(".truecolor tr:even").addClass("color2");  jQuery(".truecolor tr").hover(function(){    jQuery(this).addClass("color3")  },function(){    jQuery(this).removeClass("color3")  });});</script><style type="text/css">.truecolor {border:1px solid #333;text-align:center;}.truecolor th {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><table width="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 连缀写法折叠菜单代码