用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*/ $(this).css("background-color", frozen_back_color); }); /*对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).css("background-color", back_color); }); } 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为数组 */ frozen_back_color = new Array(); /*在当前元素下遍历td 标签*/ $(this).children("td").each(function () { /*把当前标签的值赋予 frozen_back_color */ frozen_back_color = $(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).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); }});
