欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

Jquery 实现表格颜色交替变化鼠标移过颜色变化实例_jquery

程序员文章站 2022-04-27 23:05:26
...
Jquery 实现表格颜色交替变化,点击选中行,鼠标移过颜色变化效果图如下:
源码(Demo)打包下载Jquery 实现表格颜色交替变化鼠标移过颜色变化实例_jquery
html代码如下:
复制代码 代码如下:









align="center" cellpadding="0" cellspacing="1" bgcolor="#c0de98">

















































































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 实现表格颜色交替变化鼠标移过颜色变化实例_jquery

声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。

相关文章

相关视频


网友评论

文明上网理性发言,请遵守 新闻评论服务协议

我要评论
  • Jquery 实现表格颜色交替变化鼠标移过颜色变化实例_jquery
  • 专题推荐

    作者信息
    Jquery 实现表格颜色交替变化鼠标移过颜色变化实例_jquery

    认证0级讲师

    推荐视频教程
  • Jquery 实现表格颜色交替变化鼠标移过颜色变化实例_jqueryjavascript初级视频教程
  • Jquery 实现表格颜色交替变化鼠标移过颜色变化实例_jqueryjquery 基础视频教程
  • 视频教程分类
    标题 标题 标题 标题
    数据 数据 数据 数据
    数据 数据 数据 数据
    数据 数据 数据 数据
    数据 数据 数据 数据
    数据 数据 数据 数据
    数据 数据 数据 数据
    数据 数据 数据 数据
    数据 数据 数据 数据
    数据 数据 数据 数据
    数据 数据 数据 数据
    数据 数据 数据 数据
    数据 数据 数据 数据