用js实现了鼠标放上面那一行高亮显示，那当我鼠标离开那部分时，可以实现背景恢复原状吗？ ------------------------------------------------------- var background_color = "rgb(9, 184, 218)"; //新背景色 var frozen_back_color = new Array(); var back_color = new Array(); var $last_tr; var i = 0; /*基础知识： * var 声明变量 * background_color 新的背景颜色 * $last_tr 用于实现操作原始行对象 * frozen_back_color 存储原始颜色值 * back_color 存储原始颜色值 * new Array(); 声明为数组类型 * $ Jquery 构造器函数 ${#id名称} id选择器 ${标签名称（div ，body）} ${.类名值} 类选择器 学习地址：https://www.w3school.com.cn/jquery/jquery_selectors.asp * bind() 方法为被选元素添加一个或多个事件处理程序，并规定事件发生时运行的函数。 * typeof 可以用来检测给定变量的数据类型，可能的返回值： * $(this)是jquery对象，能调用jquery的方法,JS中this 是指当前对象，例如在按钮中增加function(this){}this就是按钮对象 * .attr() 方法设置或返回被选元素的属性值。 * .each() 方法规定为每个匹配元素规定运行的函数。 * children() 方法返回返回被选元素的所有直接子元素 * css() 方法设置或返回被选元素的一个或多个样式属性。 * $(this).index() 返回相对于同级元素的位置 实验 https://www.runoob.com/jquery/misc-index.html * * */ /* * 实现过程 * 1.当鼠标移动到行的时候将行的样式参数保存到临时数组中，并改变当前行样式。 * 2.当鼠标离开的时候，将当前对象赋予$last_tr * 3.当鼠标到达行的时候，通过操作$last_tr,将之前的行变为原来的颜色，并对当前行颜色进行改变 * */ /*获取类名为.x-table下的 tr 标签 ,监听鼠标是否穿过，穿过的话执行方法*/ $(".x-table tr").bind("mouseenter", function () { /*如果$last_tr 和当前鼠标穿过行是存在的那么执行*/ if (typeof($last_tr) != "undefined"&&typeof($(this).attr("id")) != "undefined") { /*如果id=content-container的元素下 id=frozen-west 的元素的id值存在那么执行*/ if (typeof($("#content-container #frozen-west").attr("id")) != "undefined") { /*id=content-container 下id=$last_tr 的id 进行遍历*/ $("#content-container #" + $last_tr.attr("id")).each(function () { /*返回所有td单元格 然后进行遍历*/ $(this).children("td").each(function () { /*对id的 背景颜色进行配置改为frozen_back_color[i][$(this).index()]*/ $(this).css("background-color", frozen_back_color[i][$(this).index()]); }); /*对i进行加1 */ i = i + 1; }); /*初始化*/ i = 0; } /*如果获取不到id=content-container节点下的id=frozen-west 那么执行*/ else { /*遍历$last_tr下的节点td标签*/ $last_tr.children("td").each(function () { /*更改td标签的背景色为 back_color[$(this).index()]*/ $(this).css("background-color", back_color[$(this).index()]); }); } frozen_back_color = []; back_color = []; } /*保存单元格原始颜色到frozen_back_color */ /*是当前元素下是否存在id元素*/ if (typeof($(this).attr("id")) != "undefined") { /*id=content-container的标签下是否存在id=frozen-west的元素*/ if (typeof($("#content-container #frozen-west").attr("id")) != "undefined") { /*在id=content-container 下id =this.value的元素进行遍历 */ $("#content-container #" + $(this).attr("id")).each(function () { /*初始化 frozen_back_color[i]为数组 */ frozen_back_color[i] = new Array(); /*在当前元素下遍历td 标签*/ $(this).children("td").each(function () { /*把当前标签的值赋予 frozen_back_color[i] */ frozen_back_color[i][$(this).index()] = $(this).css("background-color"); /*改变当前标签元素的样式为 background_color */ $(this).css("background-color", background_color); }); /*遍历过程中对i进行累加获得对应的角标*/ i = i + 1; }); /*遍历结束，初始化i为0*/ i = 0; } /*改变单元行背景颜色*/ else { /*对当前td元素进行遍历*/ $(this).children("td").each(function () { /*将当前标签的样式赋予back_color */ back_color[$(this).index()] = $(this).css("background-color"); /*改变当前元素的值为背景色*/ $(this).css("background-color", background_color); }); } } }); /*当鼠标离开时，执行上面的函数*/ $(".x-table tr").bind("mouseleave", function () { /*如果id可以找到那么执行*/ if (typeof($(this).attr("id")) != "undefined") { /*将当前对象赋值给$last_tr */ $last_tr = $(this); } });
|
1min目标场景问卷
立即参与
最佳回答 |
||||
|
1
|
|
|||
