1.1 描述

1）  鼠标滑过及悬停时改变行的颜色，通过设置可以改变当前行，或改变多行（以设置的行数为一组）；如：变色行设置为1即每行变色；变色行设置为3即鼠标指在第1、2、3行时，第1、2、3行均会变色，鼠标指在第4、5、6行时,第4、5、6行均会变色......

2）  可设置标题行数，改变背景色时会去掉标题行后对数据行变色。

1.2 预期效果

以标题行为1，每三行为一组变色为例：

1）设计数据模板，以下为本效果的数据模板

注：此排版使用了父子格的关系，对此有不理解的可参考其他文档。

2）在 cpt 报表的分页预览的 加载结束 事件中添加以下js代码(填报预览时在填报页面设置的 加载结束 事件中添加也可实现)，并设置 title_count   和row_count 两个参数，前者为标题行数，后者为每几行变色：

注：1.想要实现效果要确保A列的所有单元格不与其他单元格有合并操作，可以空出A列并设置条件隐藏列宽。

setTimeout(function() {
var move_color='#f0e229';//鼠标悬浮的颜色
var out_color='#FFFFFF';//鼠标离开的颜色
// .x-table td 为 cpt 模板格式
$(".x-table td").mousemove(function() {  
//alert('212');
    var titlecount = title_count;  //标题行
    var rowcount  = row_count;      //变色行数
    var id  = $(this).attr("id");  //单元格id
    var num=id.search("-");         //获取id中“-”符号第一次出现的索引  
    var id1=id.substr(0,num).replace(/[^0-9]+/ig,"");  //截取id值中的行号  
    var id2=id.substr(num,id.length-num);  //截取id 
    var flag = Math.ceil((id1-titlecount) / rowcount); //判断所指行第几组
//计算起始行
    var rowstart = (flag-1)*rowcount + 1+titlecount;
//计算结尾行
    var rowend = flag * rowcount + titlecount;
//标题行不变色和所指行第几组判定
     if(id1>titlecount){
for(var i = rowstart;i<=rowend;i++){
var col1 = "A"+i+id2;
$('td[id^='+col1+']').parent('tr').find("td").css('background-color',move_color);
}
}
}); 
//下同上
$(".x-table td").mouseout(function() {  
    var rowcount  = row_count;
    var titlecount = title_count;
    var id  = $(this).attr("id");  
    var num=id.search("-");  //获取id中“-”符号第一次出现的索引  
    var id1=id.substr(0,num).replace(/[^0-9]+/ig,"");  //截取id值中的行号  
    var id2=id.substr(num,id.length-num);  //截取id 
    var b = "A";
    //  alert(b);
    var flag = Math.ceil((id1-titlecount) / rowcount);
//计算起始行
    var rowstart = (flag-1)*rowcount + 1 + titlecount;
//计算结尾行
    var rowend = flag * rowcount + titlecount;
if(id1>titlecount){
for(var i = rowstart;i<=rowend;i++){
var col1 = "A"+i+id2;
$('td[id^='+col1+']').parent('tr').find("td").css('background-color',out_color);
}
}
}); 
}, 100);

3）如果是 frm 表单的话，需要添加 初始化后 事件，代码如下（以报表块的 控件名称为 report3 为例）：

注：1.表单的话大家一定要改成对应的 报表名称

      2.想要实现效果要确保此报表块A列的所有单元格不与其他单元格有合并操作，可以空出A列并设置条件隐藏列宽。

      3.表单中会有较大延时，如果数据查询较慢需要相应增加延时的时间

setTimeout(function() {
var move_color='#f0e229';//鼠标悬浮的颜色
var out_color='#FFFFFF';//鼠标离开的颜色
// REPORT3 为 frm 中需要变色的报表块
$(".REPORT3table td").mousemove(function() {  
    var titlecount = title_count;  //标题行
    var rowcount  = row_count;      //变色行数
    var id  = $(this).attr("id");  //单元格id
    var num=id.search("-");         //获取id中“-”符号第一次出现的索引  
    var id1=id.substr(0,num).replace(/[^0-9]+/ig,"");  //截取id值中的行号  
    var id2=id.substr(num,id.length-num);  //截取id 
    var flag = Math.ceil((id1-titlecount) / rowcount); //判断所指行第几组
//计算起始行
    var rowstart = (flag-1)*rowcount + 1+titlecount;
//计算结尾行
    var rowend = flag * rowcount + titlecount;
//标题行不变色和所指行第几组判定
     if(id1>titlecount){
for(var i = rowstart;i<=rowend;i++){
var col1 = "A"+i+id2;
$('td[id^='+col1+']').parent('tr').find("td").css('background-color',move_color);
}
}
}); 
//下同上
$(".REPORT3table td").mouseout(function() {  
    var rowcount  = row_count;
    var titlecount = title_count;
    var id  = $(this).attr("id");  
    var num=id.search("-");  //获取id中“-”符号第一次出现的索引  
    var id1=id.substr(0,num).replace(/[^0-9]+/ig,"");  //截取id值中的行号  
    var id2=id.substr(num,id.length-num);  //截取id 
    var b = "A";
    //  alert(b);
    var flag = Math.ceil((id1-titlecount) / rowcount);
//计算起始行
    var rowstart = (flag-1)*rowcount + 1 + titlecount;
//计算结尾行
    var rowend = flag * rowcount + titlecount;
if(id1>titlecount){
for(var i = rowstart;i<=rowend;i++){
var col1 = "A"+i+id2;
$('td[id^='+col1+']').parent('tr').find("td").css('background-color',out_color);
}
}
}); 
}, 3000);

暂无模板

特别注意：

1. 想要实现效果要确保A列的所有单元格不与其他单元格有合并操作，可以空出A列并设置条件隐藏列宽。

2. 表单中会有较大延时，如果数据查询较慢需要相应增加延时的时间