JS实现分页预览鼠标悬停所在的行列同时改变背景色

1.1 预期效果

鼠标滑过及悬停时改变行的颜色，使用 contentPane.makeHighlight('red','mouseover') 方法在某些情况下并不能满足需求。

例如：单元格直接设置或者通过条件属性设置了背景色，鼠标滑过时颜色不改变；报表设置了列冻结，冻结部分和非冻结部分在鼠标滑动时不会同时变色。

变色效果如下图所示：

1.2. 实现思路

鼠标滑入悬停时，先遍历获取该行所有单元格的原背景色，再遍历修改为新背景色，鼠标离开时恢复当前行所有单元格为原背景色。

注：不支持cptx模板。

打开内置模板：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Primary\DetailReport\JavaScript实现分页预览鼠标悬停所在行列背景变色.cpt

2.1 示例一：悬停改变行颜色

2.1.1 添加事件

菜单栏点击「模板>模板 Web 属性>分页预览设置」，选择「为该模板单独设置」，然后添加「加载结束事件」，如下图所示：

JavaScript 代码如下（仅本代码含有 jQuery 基础知识，对 jQuery 不理解的可以先看这个）：

var background_color = "rgb(255,0,0)"; //新背景色
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);
    }
});

2.1.2 效果预览

保存，分页预览，效果图如下：

2.2 示例二：悬停变色和点击变色

2.2.1 添加事件

菜单栏点击「模板>模板 Web 属性>分页预览设置」，选择「为该模板单独设置」，然后添加「加载结束事件」，JavaScript 代码如下：

/*滑动新背景色*/
var background_color = "rgb(255,0,0)";
/* 点击新背景色*/
var click_background_color = "rgb(50,100,255)";
/*存储原始颜色*/
var frozen_back_color = new Array();
/*存储原始颜色*/
var back_color = new Array();
/*存储原始颜色*/
var click_frozen_back_color = new Array();
/*存储原始颜色*/
var click_back_color = new Array();
/*用来操作鼠标悬停变色后的节点对象*/
var $last_tr;
/*用来操作鼠标悬停变色后的节点对象*/
var $last_click_tr;
/*遍历计数器*/
var i = 0;
/*遍历计数器*/
var j = 0;
/*点击后的事件*/
$(".x-table tr[id]").bind("mouseenter", function () {
    /*判断DOM是否可以获取到，防止空指针异常*/
    if (typeof($last_tr) != "undefined") {
        /*判断DOM是否可以获取到，防止空指针异常*/
        if (typeof($last_click_tr) == "undefined" || (typeof($last_click_tr) != "undefined" && $last_tr.attr("id") != $last_click_tr.attr("id"))) {
            /*判断DOM是否可以获取到，防止空指针异常*/
            if (typeof($(this).attr("id")) != "undefined") {
                /*判断DOM是否可以获取到，防止空指针异常*/
                if (typeof($("#content-container #frozen-west").attr("id")) != "undefined") {
                    /*将改变背景色的元素恢复原来的背景色*/
                    $("#content-container #" + $last_tr.attr("id")).each(function () {
                        $(this).children("td").each(function () {
                            $(this).css("background-color", frozen_back_color[i][$(this).index()]);
                        });
                        /*遍历下一个元素*/
                        i = i + 1;
                    });
                    /*遍历结束初始化遍历计数器*/
                    i = 0;
                }
                /*将改变背景色的元素恢复原来的背景色*/
                else {
                    $last_tr.children("td").each(function () {
                        $(this).css("background-color", back_color[$(this).index()]);
                    });
                }
                /*初始化存储原始值的数组对象*/
                frozen_back_color = [];
                back_color = [];
            }
        }
    }
    /*判断DOM是否可以获取到，防止空指针异常*/
    if (typeof($(this).attr("id")) != "undefined" && (typeof($last_click_tr) == "undefined" || (typeof($last_click_tr) != "undefined" && $(this).attr("id") != $last_click_tr.attr("id")))) {
        /*判断DOM是否可以获取到，防止空指针异常*/
        if (typeof($("#content-container #frozen-west").attr("id")) != "undefined") {
            /*遍历元素*/
            $("#content-container #" + $(this).attr("id")).each(function () {
                /*初始化二位数组用来存储每个td单元格的样式*/
                frozen_back_color[i] = new Array();
                /*执行DOM操作*/
                $(this).children("td").each(function () {
                    /*将原始样式存储在frozen_back_color[i][$(this).index()] 数组中*/
                    frozen_back_color[i][$(this).index()] = $(this).css("background-color");
                    /*给单元给改变背景颜色*/
                    $(this).css("background-color", background_color);
                });
                /*遍历下一个元素*/
                i = i + 1;
            });
            /*初始化遍历计数器*/
            i = 0;
        }
        /*如果上面If的条件不成立那么执行*/
        else {
            /*遍历单元格DOM对象*/
            $(this).children("td").each(function () {
                /*将原始样式存储在back_color[$(this).index()]*/
                back_color[$(this).index()] = $(this).css("background-color");
                /*给单元格赋予新的样式*/
                $(this).css("background-color", background_color);
            });
        }
    }
    /*将当前DOM对象指向 $last_tr 用于后续进行DOM 操作*/
    $last_tr = $(this);
});
/*监听鼠标点击事件*/
$(".x-table tr[id]").bind("mousedown", function () {
    /*判断DOM是否可以获取到，防止空指针异常*/
    if (typeof($last_click_tr) != "undefined") {
        /*判断DOM是否可以获取到，防止空指针异常*/
        if ($(this).attr("id") != $last_click_tr.attr("id")) {
            /*判断DOM是否可以获取到，防止空指针异常*/
            if (typeof($(this).attr("id")) != "undefined") {
                /*判断DOM是否可以获取到，防止空指针异常*/
                if (typeof($("#content-container #frozen-west").attr("id")) != "undefined") {
                    /*对id=content-container下id$last_click_tr的元素行进行遍历操作*/
                    $("#content-container #" + $last_click_tr.attr("id")).each(function () {
                        /*对当前元素下单元格进行遍历操作*/
                        $(this).children("td").each(function () {
                            /*将单元格的颜色变为原来点击前的颜色*/
                            $(this).css("background-color", click_frozen_back_color[j][$(this).index()]);
                        });
                        /*遍历下一个元素*/
                        j = j + 1;
                    });
                    /*初始化遍历计数器*/
                    j = 0;
                }
                /*如果if (typeof($("#content-container #frozen-west").attr("id")) != "undefined")  不成立那么执行*/
                else {
                    /*遍历原来已经改变的DOM对象的单元格*/
                    $last_click_tr.children("td").each(function () {
                        /*将单元格颜色变为原来的颜色*/
                        $(this).css("background-color", click_back_color[$(this).index()]);
                    });
                }
                /*初始化存储原颜色的数组对象*/
                click_frozen_back_color = [];
                /*初始化存储原颜色的数组对象*/
                click_back_color = [];
            }
        }
    }
    /*判断DOM是否可以获取到，防止空指针异常*/
    if (typeof($(this).attr("id")) != "undefined" && (typeof($last_click_tr) == "undefined" || (typeof($last_click_tr) != "undefined" && $(this).attr("id") != $last_click_tr.attr("id")))) {
        /*将frozen_back_color的所有元素赋予 click_frozen_back_color */
        click_frozen_back_color = frozen_back_color.slice();
        /*将back_color的所有元素赋予click_back_color */
        click_back_color = back_color.slice();
        /*判断DOM是否可以获取到，防止空指针异常*/
        if (typeof($("#content-container #frozen-west").attr("id")) != "undefined") {
            /*遍历当前节点下的ID为content-container的元素*/
            $("#content-container #" + $(this).attr("id")).each(function () {
                /*遍历当前元素的单元格*/
                $(this).children("td").each(function () {
                    /*给当前单元格增加点击后的背景颜色*/
                    $(this).css("background-color", click_background_color);
                });
            });
        }
        /*if (typeof($("#content-container #frozen-west").attr("id")) != "undefined") 不成立那么执行*/
        else {
            /*遍历当前节点下的所有td单元格元素*/
            $(this).children("td").each(function () {
                /*给当前单元格增加新的颜色*/
                $(this).css("background-color", click_background_color);
            });
        }
    }
    /*将当前点击后的对象赋予$last_click_tr 用于后续DOM操作*/
    $last_click_tr = $(this);
});

2.2.2 效果预览

在悬停改变行色的基础上，实现点击改行可以再次变色，效果如下图所示：

2.3 示例三：悬停改变列颜色

2.3.1 添加事件

菜单栏点击「模板>模板 Web 属性>分页预览设置」，选择「为该模板单独设置」，然后添加「加载结束事件」，JavaScript 代码如下：

/*新的背景色*/
var background_color = "rgb(255,0,0)";
/*存储原始背景色的数组*/
var back_color = new Array();
/*从出原始色*/
var last_col = "";

var current_col = "";
/*当鼠标穿过的时候执行事件*/
$(".x-table td[id]").bind("mouseenter", function () {
    /*判断是否对last_col 赋值过*/
    if (last_col != "") {
        /*朝朝td下id值为last_col 的元素*/
        $("td[id^='" + last_col + "']").filter(function () {
            /*判断id的值是否等于last_col */
            if ($(this).attr("id").split("-")[0].replace(/[^a-zA-Z]/g, "") == last_col) {
                /*如果等于，那么使用但前元素进行下一步遍历*/
                return $(this);
            }
        }).each(function () {
            /*遍历所有已经变色了单元格，变为原来的颜色*/
            $(this).css("background-color", back_color[$(this).parent("tr").attr("tridx")]);
        });
        /*初始化存储原始颜色的数组*/
        back_color = [];
        /*初始化存储原始颜色的变量*/
        last_col = "";
    }
    /*判断DOM 对象是否存在，防止空指针异常*/
    if (typeof($(this).attr("id")) != "undefined") {
        /*将当前的元素颜色数据存放在current_col中用于后续将元素变为原来的颜色*/
        current_col = $(this).attr("id").split("-")[0].replace(/[^a-zA-Z]/g, "");
        /*对td单元格进行过滤操作*/
        $("td[id^='" + current_col + "']").filter(function () {
            /*过滤选中id值等于current_col的元素*/
            if ($(this).attr("id").split("-")[0].replace(/[^a-zA-Z]/g, "") == current_col) {
                /*返回符合条件的DOM元素对象*/
                return $(this);
            }
            /*对符合条件的DOM元素进行遍历操作*/
        }).each(function () {
            /*保存当前元素的背景样式到back_color[]*/
            back_color[$(this).parent("tr").attr("tridx")] = $(this).css("background-color");
            /*改变当前元素的背景颜色额为新的背景颜色*/
            $(this).css("background-color", background_color);
        });
        /*初始化current_col，方便下一次使用*/
        current_col = "";
    }
});
/*当鼠标指针离开时执行事件*/
$(".x-table td[id]").bind("mouseleave", function () {
    /*判断DOM对象是否存在，防止空指针*/
    if (typeof($(this).attr("id")) != "undefined") {
        /*将同列的DOM对象赋予 last_col  用于后续操作 */
        last_col = $(this).attr("id").split("-")[0].replace(/[^a-zA-Z]/g, "");
    }
});

2.3.2 效果预览

鼠标悬停在某列时，会改变该列的颜色，效果如下图所示：

2.4 示例四：悬停同时改变行列颜色

菜单栏点击「模板>模板 Web 属性>分页预览设置」，选择「为该模板单独设置」，然后添加「加载结束事件」，JavaScript 代码如下：

/*新背景色*/
var background_color = "rgb(255,0,0)";
/*用于存放原样式*/
var row_frozen_back_color = new Array();
/*用于存放原样式*/
var row_back_color = new Array();
/*用于调用原DOM*/
var $last_tr;
/*遍历计数器*/
var i = 0;
/*用于存放原样式*/
var col_back_color = new Array();
/*用于存放原样式*/
var last_col = "";
/*用于存放原样式*/
var current_col = "";
/*当鼠标经过时执行*/
$(".x-table td[id]").bind("mouseenter", function () {
    /*判断DOM是否可以获取到，防止空指针异常*/
    if (typeof($last_tr) != "undefined") {
        if (typeof($(this).parent("tr").attr("id")) != "undefined") {
            /*判断DOM是否可以获取到，防止空指针异常*/
            if (typeof($("#content-container #frozen-west").attr("id")) != "undefined") {
                /*遍历id=content-container 下 id= $last_tr的元素*/
                $("#content-container #" + $last_tr.attr("id")).each(function () {
                    /*遍历当前元素下的td单元格*/
                    $(this).children("td").each(function () {
                        /*将单元格样式恢复原样*/
                        $(this).css("background-color", row_frozen_back_color[i][$(this).index()]);
                    });
                    /*遍历下一个元素*/
                    i = i + 1;
                });
                /*初始化遍历计数器*/
                i = 0;
            }
            /*if (typeof($("#content-container #frozen-west").attr("id")) != "undefined") 不成立那么执行*/
            else {
                /*遍历td元素*/
                $last_tr.children("td").each(function () {
                    /*将单元格恢复原来的样式*/
                    $(this).css("background-color", row_back_color[$(this).index()]);
                });
            }
            /*初始化存放原样式的数组*/
            row_frozen_back_color = [];
            /*初始化存放原样式的数组*/
            row_back_color = [];
        }
    }
    /*判断last_col 是否存在数据*/
    if (last_col != "") {
        /*过滤并遍历所有同列元素*/
        $("td[id^='" + last_col + "']").filter(function () {
            /*返回同列元素*/
            if ($(this).attr("id").split("-")[0].replace(/[^a-zA-Z]/g, "") == last_col) {
                /*返回同列元素*/
                return $(this);
            }
            /*遍历*/
        }).each(function () {
            /*将同列元素恢复原始样式*/
            $(this).css("background-color", col_back_color[$(this).parent("tr").attr("tridx")]);
        });
        /*初始化原样式数组*/
        col_back_color = [];
        /*初始化原样式数组*/
        last_col = "";
    }
    /*判断DOM对象是否存在，防止空指针异常*/
    if (typeof($(this).attr("id")) != "undefined") {
        /*将所有的列元素赋值于 current_col */
        current_col = $(this).attr("id").split("-")[0].replace(/[^a-zA-Z]/g, "");
        /*过滤属于同列的元素*/
        $("td[id^='" + current_col + "']").filter(function () {
            /*判断是否为同列的元素*/
            if ($(this).attr("id").split("-")[0].replace(/[^a-zA-Z]/g, "") == current_col) {
                /*返回同列的元素*/
                return $(this);
            }
            /*进行遍历*/
        }).each(function () {
            /*将同列元素的原始样式赋值到ol_back_color[$(this).parent("tr").attr("tridx")]*/
            col_back_color[$(this).parent("tr").attr("tridx")] = $(this).css("background-color");
        });
        /*判断DOM对象是否可以获取到，防止空指针操作*/
        if (typeof($("#content-container #frozen-west").attr("id")) != "undefined") {
            /*获取当前行元素*/
            $("#content-container #" + $(this).parent("tr").attr("id")).each(function () {
                /*初始化数组对象*/
                row_frozen_back_color[i] = new Array();
                /*遍历当前行下所有的td单元格*/
                $(this).children("td").each(function () {
                    /*将单元格背景样式赋予row_frozen_back_color[i][$(this).index()] */
                    row_frozen_back_color[i][$(this).index()] = $(this).css("background-color");
                    /*改变当前单元格的背景样式*/
                    $(this).css("background-color", background_color);
                });
                /*遍历下一个元素*/
                i = i + 1;
            });
            /*初始化遍历计数器*/
            i = 0;
        }
        /*if (typeof($("#content-container #frozen-west").attr("id")) != "undefined") { 不成立执行*/
        else {
            /*获取父元素下所有的行的单元格，并进行遍历*/
            $(this).parent("tr").children("td").each(function () {
                /*保存单元格样式到row_back_color[$(this).index()] */
                row_back_color[$(this).index()] = $(this).css("background-color");
                /*改变单元格的样式*/
                $(this).css("background-color", background_color);
            });
        }
        /*过滤出属于同一列单元格的元素对象*/
        $("td[id^='" + current_col + "']").filter(function () {
            /*是否属于同一列*/
            if ($(this).attr("id").split("-")[0].replace(/[^a-zA-Z]/g, "") == current_col) {
                /*返回同一列的DOM 对象*/
                return $(this);
            }
            /*对同一列的对象进行遍历*/
        }).each(function () {
            /*对同一列单元格对象的样式进行更改*/
            $(this).css("background-color", background_color);
        });
        /*初始化存储原始样式的变量*/
        current_col = "";
    }
});
/*鼠标离开后执行事件*/
$(".x-table td[id]").bind("mouseleave", function () {
    /*判断元素是否可以获取到，防止空指针异常*/
    if (typeof($(this).attr("id")) != "undefined") {
        /*将DOM对象保存到last_col，方便后续操作*/
        last_col = $(this).attr("id").split("-")[0].replace(/[^a-zA-Z]/g, "");
    }
    /*判断DOM对象是否可以获取到，防止空指针操作*/
    if (typeof($(this).parent("tr")) != "undefined") {
        /*将DOM 对象保存到last_tr 方便进行后续操作*/
        $last_tr = $(this).parent("tr");
    }
});

2.4.2 效果预览

鼠标悬停时改变该行和列的颜色，效果如下图所示：

2.5 示例五：悬停表头不变色

2.5.1 添加事件

菜单栏点击「模板>模板 Web 属性>分页预览设置」，选择「为该模板单独设置」，然后添加「加载结束事件」，JavaScript 代码如下：

/*新的背景颜色*/
var background_color = "rgb(255,0,0)";
/*用于保存原始背景色*/
var frozen_back_color = new Array();
/*用于保存原始背景色*/
var back_color = new Array();
/*用于保存已发生改变的DOM对象，方便后续恢复样式操作*/
var $last_tr;
/*遍历计数器*/
var i = 0;
/* 首行除外，tr:gt(0)定位首行，索引从0开始，标题行为多行时注意此位置代码要做相应修改*/
$('.x-table tr:gt(0)') .bind("mouseenter", function () {
/*$(".x-table tr")*/
/*判断元素是否可以获取到，防止空指针操作*/
    if (typeof($last_tr) != "undefined") {
        /*判断元素是否可以获取到，防止空指针操作*/
        if (typeof($(this).attr("id")) != "undefined") {
            /*判断元素是否可以获取到，防止空指针操作*/
            if (typeof($("#content-container #frozen-west").attr("id")) != "undefined") {
                /*遍历所有的id值等于content-container下id=$last_tr的元素 ，即对已改变的元素进行操作*/
                $("#content-container #" + $last_tr.attr("id")).each(function () {
                    /*遍历所有的单元格元素怒*/
                    $(this).children("td").each(function () {
                        /*将单元格元素恢复原始色*/
                        $(this).css("background-color", frozen_back_color[$(this).index()]);
                    });
                    /*遍历下一个*/
                    i = i + 1;
                });
                /*初始化遍历计数器*/
                i = 0;
            }
            /*if (typeof($("#content-container #frozen-west").attr("id")) != "undefined") { 不成立*/
            else {
                /*获取所有的单元格元素*/
                $last_tr.children("td").each(function () {
                    /*恢复原来的样式*/
                    $(this).css("background-color", back_color[$(this).index()]);
                });
            }
            /*初始化存储原样式的数组*/
            frozen_back_color = [];
            /*初始化存储原样式的数组*/
            back_color = [];
        }
    }
    /*判断元素是否可以获取到，防止空指针操作*/
    if (typeof($(this).attr("id")) != "undefined") {
        /*判断元素是否可以获取到，防止空指针操作*/
        if (typeof($("#content-container #frozen-west").attr("id")) != "undefined") {
            /*获取content-container下所有的id=当前对象的元素*/
            $("#content-container #" + $(this).attr("id")).each(function () {
                /*初始化存放原始色的对象数组*/
                frozen_back_color = new Array();
                /*对所有单元格进行操作*/
                $(this).children("td").each(function () {
                    /*保存原始单元格背景色到frozen_back_color*/
                    frozen_back_color[$(this).index()] = $(this).css("background-color");
                    /*对当前单元格赋予新的颜色*/
                    $(this).css("background-color", background_color);
                });
                /*遍历下一个元素*/
                i = i + 1;
            });
            /*初始化遍历计数器*/
            i = 0;
        }
        /* if (typeof($("#content-container #frozen-west").attr("id")) != "undefined") { 不成立*/
        else {
            /*对当前节点下多有的td元素进行遍历操作*/
            $(this).children("td").each(function () {
                /*将当前对象的原始样式保存在 back_color数组中*/
                back_color[$(this).index()] = $(this).css("background-color");
                /*给当前元素赋予新的背景色*/
                $(this).css("background-color", background_color);
            });
        }
    }
});
/*首行除外的元素如果发生鼠标离开事件，tr:gt(0)定位首行，索引从0开始，标题多行时此位置代码要做相应修改*/
$('.x-table tr:gt(0)') .bind("mouseleave", function () {
    /*判断元素是否可以获取到，防止空指针异常*/
    if (typeof($(this).attr("id")) != "undefined") {
        /*将当前对象赋予$last_tr  方便后续操作*/
        $last_tr = $(this);
    }
});

2.5.2 效果预览

有时候，悬停变色只需对部分单元格生效，并不需要对（重复/冻结）表头也做处理。如图：首行（某N行）颜色不受影响。

具体效果如下所示：

已完成模板可参见：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\分页预览JS实例\JS实现鼠标悬停所在行列变色.cpt

点击下载模板：JS实现鼠标悬停所在行列变色.cpt