JS实现改变当前选中单元格的背景色，离开后恢复原色

1. 概述
1.1 预期效果

通过 JS 函数，可以实现改变鼠标所在行的颜色，具体使用请参见 JS 实现分页预览改变鼠标所在行的颜色。

在报表制作中，有时为了突出当前选中的单元格，需要突出一下背景色，而在鼠标离开后恢复原有的背景色。如下图所示：

1.2 实现思路

通过设置加载结束事件即可实现此效果。

2. 示例

2.1 模板设计

打开模板%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Form\LineForm\LineForm.cpt。

为了验证方法的通用性，将 C3 单元格背景色设置成#FFCC00，D3 单元格背景色设置为#CC99FF，设置方法请参见 报表的设计与配色技巧 。如下图所示：

2.2 设置加载结束事件

点击 模板>模板 Web 属性>填报页面设置，选择为该模板单独设置，取消勾选填报当前编辑行背景设置，添加一个加载结束事件，如下图所示：

注：不能同时改变当前编辑行背景色和单元格背景色，会有冲突，在实际使用中根据需要选择使用一种。

JavaScript 代码如下：

1. var $lasttd;//上一个单元格变量
   
2. var lastcolor;//上一次颜色变量
   
3. $('.x-table td').click(function(){
   
4. if($lasttd){
   
5. $lasttd.css('background',lastcolor);
   
6. }//离开后原单元格恢复原色
   
7. lastcolor=$(this).css('background-color');
   
8. if(!lastcolor)
   
9. lastcolor=$(this).css('background');//保存原始颜色
   
10. $(this).css('background','red');//设置当前单元格为红色
    
11. $lasttd=$(this);//保存上一个单元格
    
12. });

复制代码

2.3 预览效果

保存模板，选择填报预览，实现效果如1.1 预期效果所示。

注1：此方法适用于分析预览，需要在模板>模板 Web 事件>数据分析预览设置中增加加载结束事件，代码相同。

注2：不支持移动端。

3. 模板下载

已完成的模板，可参见：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\填报预览JS实例\21-JS实现改变当前选中单元格的背景色，离开后恢复原色.cpt

点击下载模板：21-JS实现改变当前选中单元格的背景色，离开后恢复原色.cpt