【表单JS实例】报表块中点击单元格改变颜色再次点击恢复颜色

1. 描述
1.1 问题描述

在报表块中，点击单元格背景色发生变化，再次点击单元格背景色恢复。

1.2 解决思路

但这些方案解决不了单元格颜色的恢复。对报表块添加初始化事件，使用 setTimeOut函数来定义单击事件，其中分别设置点击单元格后的背景色和恢复的背景色，根据点击时单元格的颜色决定设置背景色。

2. 示例
2.1 报表设计

1）新建决策报表，新建数据集 ds1：select * from 销量。

2）在决策报表中拖入一个报表块，报表块设计如下：

2.2 添加初始化后事件

给报表块添加初始化后事件，如下图所示：

JS 代码如下：

1. setTimeout(function() {
   
2.     //选择时背景颜色变量  
   
3.     var oldColor = "rgb(255, 255, 255)";
   
4.     var newColor = "rgb(255, 0, 0)";
   
5.     $('.x-table td').click(function() {
   
6.         if($(this).css('background-color') != newColor) {
   
7.             $(this).css('background', newColor);
   
8.         } else if($(this).css('background-color') == newColor) {
   
9.             $(this).css('background', oldColor);
   
10.         }
    
11.     });
    
12. }, 1000);

复制代码

如果想要保留一行颜色，具体 JS 代码如下：

1. setTimeout(function() {
   
2.     //选择时背景颜色变量  
   
3.     var oldColor = "rgb(255, 255, 255)";
   
4.     var newColor = "rgb(255, 0, 0)";
   
5.     $('.x-table td').click(function() {
   
6.         $(this).css('background', newColor).siblings().css("background",oldColor);
   
7.     });
   
8. }, 1000);

复制代码

3. 预览效果

保存模板，点击预览，效果如下图所示：

注：不支持移动端。

4. 已完成模板

已完成的模板，可参见：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\表单JS实例\05-报表块中点击单元格改变颜色再次点击恢复颜色.frm

模板下载见附件

你好，怎么整行变色

同问整行变色~~

FR升级新自适应后，JS代码不起作用