当前位置:  编程技术>jquery

Jquery 表格颜色交替变化,点击选中行,鼠标移过颜色变化的代码分享

    来源: 互联网  发布时间:2014-09-03

    本文导语:  Jquery 实现表格颜色交替变化,点击选中行,鼠标移过颜色变化。 效果如下图: 1,html部分:   代码示例:             .table-tr-title{      height: 26px;      font-size: 12px;      text-align: center;  }  .table-tr-cont...

Jquery 实现表格颜色交替变化,点击选中行,鼠标移过颜色变化。
效果如下图:

1,html部分:
 

代码示例:
 
 
 
 
 
 
.table-tr-title{ 
    height: 26px; 
    font-size: 12px; 
    text-align: center; 

.table-tr-content{ 
    height: 18px; 
    background: #FFFFFF; 
    text-align: center; 
    font-size: 12px; 

.normalEvenTD{ 
    background: #DFD8D8; 

.normalOddTD{ 
    background: #FFFFFF; 

.hoverTD{ 
    background-color: #eafcd5; 
    height: 18px; 
    text-align: center; 
    font-size: 12px; 

.trSelected{ 
    background-color: #51b2f6; 
    height: 18px; 
    text-align: center; 
    font-size: 12px; 

 
 
 
 
         
            标题 
            标题 
            标题 
            标题 
         
         
            数据 
            数据 
            数据 
            数据 
         
         
            数据 
            数据 
            数据 
            数据 
         
         
            数据 
            数据 
            数据 
            数据 
         
         
            数据 
            数据 
            数据 
            数据 
         
         
            数据 
            数据 
            数据 
            数据 
         
         
            数据 
            数据 
            数据 
            数据 
         
         
            数据 
            数据 
            数据 
            数据 
         
         
            数据 
            数据 
            数据 
            数据 
         
         
            数据 
            数据 
            数据 
            数据 
         
         
            数据 
            数据 
            数据 
            数据 
         
         
            数据 
            数据 
            数据 
            数据 
         
         
            数据 
            数据 
            数据 
            数据 
         
 

2,js脚本部分
 

代码示例:
table-row-1.0.js
$(document).ready(function(){ 
    ///////datagrid选中行变色与鼠标经过行变色/////////////// 
    var dtSelector = ".list"; 
    var tbList = $(dtSelector); 
 
    tbList.each(function() { 
        var self = this; 
        $("tr:even:not(:first)", $(self)).addClass("normalEvenTD"); // 从标头行下一行开始的奇数行,行数:(1,3,5...) 
        $("tr:odd", $(self)).addClass("normalOddTD"); // 从标头行下一行开始的偶数行,行数:(2,4,6...) 
 
        // 鼠标经过的行变色 
        $("tr:not(:first)", $(self)).hover( 
            function () { $(this).addClass('hoverTD');$(this).removeClass('table-td-content'); }, 
            function () { $(this).removeClass('hoverTD');$(this).addClass('table-td-content'); } 
        ); 
 
        // 选择行变色 
        $("tr", $(self)).click(function (){ 
            var trThis = this; 
            $(self).find(".trSelected").removeClass('trSelected'); 
            if ($(trThis).get(0) == $("tr:first", $(self)).get(0)){ 
                return; 
            } 
            $(trThis).addClass('trSelected'); 
        }); 
    }); 
});

    
 
 

您可能感兴趣的文章:

  • jQuery颜色选择器 ExColor
  • jQuery 颜色选择器 mColorPicker
  • jQuery 颜色拾取器 ColorPicker
  • jQuery表格颜色插件 HeatColor
  • jQuery颜色选择器插件 Farbtastic
  • jQuery 颜色插件 JeeGoo Colo
  • jQuery颜色拾取器 jPicker
  • jQuery颜色选择器 iColorPicker
  • jQuery 颜色选择器 Spectrum
  • jQuery 颜色插件 bootstrap-colorpickersliders
  • jQuery 颜色选择插件 evol.colorpicker
  • jquery获取样式中background-color颜色值
  • jquery获取颜色在ie和ff下的区别示例介绍
  • 轻量级 jQuery 颜色选择器 Colpick
  • jquery修改网页背景颜色通过css方法实现
  • JQuery 动态改变字体颜色的实现代码
  • jquery控制表格奇偶行与活动行颜色
  • 如何用jquery控制表格奇偶行及活动行颜色
  • jquery实现的随机多彩tag标签随机颜色和字号大小效果
  • jquery实现效果比较好的table选中行颜色
  • jquery animate实现DIV变化或左右移动
  • 浅析jQuery1.8的几个小变化
  •  
    本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
    本站(WWW.)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。












  • 相关文章推荐
  • jquery中交替点击事件的实现代码
  • jquery中交替点击事件toggle方法的使用示例
  • 通过javascript库JQuery实现页面跳转功能代码
  • jQuery鼠标动画插件 jquery-ahover
  • jQuery概述,代码举例及最新版下载
  • jQuery向导插件 Jquery Wizard Plugin
  • Jquery操作html复选框checkbox:全选,全不选和反选
  • jQuery圆角插件 jQuery Corners
  • struts+spring+hibernate+jquery实现分页功能的几个基本类介绍(异步加载)
  • jQuery相册插件 jQuery.popeye
  • jQuery UI组件 jQuery UI
  • jQuery右键菜单插件 jQuery ContextMenu
  • jQuery分页插件 Pagination jQuery Plugin
  • jQuery日历插件 jQuery Week Calendar
  • jQuery的中文日历插件 jQuery.datePickerCn
  • jQuery实现CSS3动画效果的插件 jQuery Transit
  • jQuery的CSV插件 jQuery CSV
  • jQuery的气泡提示插件 jquery.ns_bub.js
  • jQuery气泡提示插件 jquery-rollover-tooltip
  • jQuery对话框 jQuery Modal Dialog
  • jQuery 插件 jQuery Ripples
  • 精简版的jQuery jQuery.ish
  • jQuery的OpenSocial插件 OpenSocial jQuery


  • 站内导航:


    特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2021,,E-mail:www_#163.com(请将#改为@)

    浙ICP备11055608号-3