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

本文实例讲述了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="js/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程序设计有所帮助。

赞 (0)

相关推荐

  • jquery衣服颜色选取插件效果代码分享

    jquery衣服颜色选取插件效果代码分享

    本文实例讲述了jquery衣服颜色选取插件效果.分享给大家供大家参考.具体如下: 这是一款基于jquery实现衣服颜色选取插件效果代码,有了这个插件可以为自己搭配衣服颜色,自己就是设计师,为自己设计独一无二的衣服,是一款非常实用的特效代码,值得大家学习. 运行效果图:-------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的jquery衣服颜色选取插件效果代码如下 <head> <

  • JQuery 拾色器插件发布-jquery.icolor.js

    JQuery 拾色器插件发布-jquery.icolor.js

    以前我一直用的那个(eyecon.ro) 功能完整也简易,但是不尽符合上面的要求,于是 google了N下,结果没找到现成的jquery拾色器插件很好的支持以下功能: 简单易用,仅显示常用的那些色块给用户选择,另外提供一个输入框方便用户输入自定义的色值 于是我写了icolor这个插件,除了支持上面的要求,还有别的一些特性如下: 1,默认提供的色值为"常用的浏览器安全的色值".相当于整合了下面最后一个prototype版本的颜色拾取器.关于浏览器安全色值,可参考维基文档http://en

  • jquery修改网页背景颜色通过css方法实现

    jquery修改网页背景颜色通过css方法实现

    我们在浏览一些网站,尤其是一些小说网站的时候,都会有修改页面背景颜色的地方,这个功能使用jquery很容易实现. 效果图:  show you code: 复制代码 代码如下: <!doctype html> <html> <head> <meta charset="utf-8"> <title>jquery test</title> <script src="jquery-1.11.1.min.j

  • jquery获取css的color值返回RGB的方法

    本文实例讲述了jquery获取css的color值返回RGB的方法.分享给大家供大家参考,具体如下: css代码如下: a, a:link, a:visited { color:#4188FB; } a:active, a:focus, a:hover { color:#FFCC00; } js代码如下: var link_col = $("a:link").css("color"); alert(link_col); // returns rgb(65, 136,

  • jquery使用ColorBox弹出图片组浏览层实例演示

    本示例使用Jquery的ColorBox插件弹出图片组浏览层.效果预览网址:http://www.keleyi.com/keleyi/phtml/colorbox/ 以下是本效果的完整代码,将以下代码保存到html文件,打开即可预览效果. 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-tra

  • Colortip基于jquery的信息提示框插件在IE6下面的显示问题修正方法

    Colortip基于jquery的信息提示框插件在IE6下面的显示问题修正方法

    今天又回顾了一下这个插件,然后发现它在IE6下面工作的时候,显示起来是不正常的,tip经常出现在很离谱的位置.问题还有,由于tip的显示效果没有用到任何图像,都是纯的CSS,所以里面用CSS实现的三角形在IE6下是无法工作的,会显示一块有色区域,很丑,所以我就想动手改它一下.先上一张对比图好了: js方面的代码肯定是没问题的,问题出CSS上,Colortip用的是position进行定位,在IE6下面可能存在着一点问题.而且由于IE6不支持border-color:transparent的属性,

  • JQuery实现动态适时改变字体颜色的方法

    本文实例讲述了JQuery实现动态适时改变字体颜色的方法.分享给大家供大家参考.具体分析如下: JQuery动态适时改变字体的颜色,Ajax的效果类似,在文本框输入文字,再选择色块,输入的文字就会变成色块标示的颜色值,很不错的效果吧.如果运行有错,请刷新一次页面即可. 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1

  • Jquery颜色选择器ColorPicker实现代码

    Jquery颜色选择器ColorPicker实现代码

    在CMS中通常都有给标题添加颜色的功能,但一般都比较简单,颜色支持也少,这里我要分享一个自己修改的颜色选择器.界面简洁,功能强大.在我们的日常项目中可以快速的部署. 复制代码 代码如下: $(".colorpicker").colorpicker({ target:'#title', success:function(o,color){ $("#color").val(color) }, reset:function(o){ $("#color"

  • jQuery实现鼠标滑过Div层背景变颜色的方法

    本文实例讲述了jQuery实现鼠标滑过Div层背景变颜色的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <head> <title>jQuery实现感应鼠标经过Div层变换图层背景颜色)</title> <style type="text/css"> .divbox{   height:300px;   width:200px;   background:#ffffff;   border

  • JQuery获取样式中的background-color颜色值的问题

    今天使用JQuery获取样式中的background-color的值时发现在获取到的颜色值在IE中与Chrome.Firefox显示的格式不一样,IE中是以HEX格式显示[#ffff00],而Chrome.Firefox中则是以GRB格式显示[rgb(255,255,0)],而我需要的是十六进制的颜色值,用于存储到数据库中,在网上找到下段代码能解决此问题: 复制代码 代码如下: $.fn.getHexBackgroundColor = function() { var rgb = $(this)

随机推荐