JS实现改变当前选中单元格的背景色，离开后恢复原色
1. 描述
目前通过JS函数，可以实现改变鼠标所在行的颜色，具体使用见JS实现分页预览改变鼠标所在行的颜色，但是没有提供改变鼠标所在单元格颜色的方法，在报表制作中，有时为了突出当前选中的单元格，需要突出一下背景色，而在鼠标离开后恢复原有的背景色，通过本文档，可以方便地设置鼠标选中单元格背景色变色，而在鼠标离开后恢复原色。
2. 思路
给填报页面设置加载结束事件
3. 操作步骤
3.1 模板修改
打开模板%FR_HOME%\WebReport\WEB-INF\reportlets\doc\Form\LineForm\LineForm.cpt，如下图：
报表的设计与配色技巧
设置完后的模板如下图：
3.2 JS代码设置
因为此模板是需要进行填报预览的，打开菜单模板>模板web属性>填报页面设置，去掉填报当前编辑行背景设置选项的勾选，在事件设置中新加一个加载结束事件，输入JS代码，如下图：
注：不能同时改变当前编辑行背景色和单元格背景色，会有冲突，所以在实际使用中根据需要选择使用一种。
JS代码如下：
var $lasttd;//上一个单元格变量
var lastcolor;//上一次颜色变量
$('.x-table td').click(function(){
if($lasttd){
$lasttd.css('background',lastcolor);
} //离开后原单元格恢复原色
lastcolor=$(this).css('background-color');
if(!lastcolor)
lastcolor=$(this).css('background');//保存原始颜色
$(this).css('background','red');//设置当前单元格为红色
$lasttd=$(this);//保存上一个单元格
});
4. 预览效果
4.1 PC端预览效果
经过测试，此方法同样适用于分析预览，具体设置方法类似，需要在模板>模板web事件>数据分析预览设置中增加加载结束事件，代码相同。
4.2 移动端预览效果
注：此JS不支持移动端使用
5. 已完成模板
模板效果在线查看请点击：JS实现改变当前选中单元格的背景色，离开后恢复原色.cpt
已完成的模板，可参见：%FR_HOME%\WebReport\WEB-INF\reportlets\doc\JS\填报预览JS实例\21-JS实现改变当前选中单元格的背景色，离开后恢复原色.cpt
附件列表
文档内容仅供参考，如果你需要获取更多帮助，付费/准付费客户请咨询帆软技术支持
关于技术问题，您还可以前往帆软社区，点击顶部搜索框旁边的提问按钮
若您还有其他非技术类问题，可以联系帆软传说哥（qq：1745114201）