JS实现改变复选框选中行中指定单元格背景色

1. 概述
1.1 问题描述

数据填报时，当鼠标选定复选框控件后，改变选中行的指定单元格的背景色。

1.2 实现思路

给复选框控件添加状态改变事件来改变被选中行的指定单元格的背景色

2. 示例
2.1 打开报表

打开报表%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Form\LineForm\LineForm7.cpt

2.2 修改报表

右键 A3 单元格，清除内容，设置 A3 单元格的左父格为 B3。

右键 A3 单元格选择控件设置，控件类型选择复选框控件，点击事件编辑，添加“状态改变”事件，在 JavaScript 脚本框的参数栏中添加参数 row，值选择公式，为 ROW()，如下图所示：

JS 代码：

1. var value = this.getValue();
   
2. if(value)
   
3. {
   
4. $('td[id^=H'+row+'-0-0]').css({'background-color':'yellow'});
   
5. }
   
6. if(!value)
   
7. {
   
8. $('td[id^=H'+row+'-0-0]').css({'background-color':'white'});
   
9. }
   
10. 代码解释：
    
11. 
    
12. if(value){$('td[id^=H'+row+'-0-0]').css({'background-color':'yellow'});}  //当复选框被勾选时，当前行的 H 列单元格的背景色变成黄色
    
13. 
    
14. if(!value){$('td[id^=H'+row+'-0-0]').css({'background-color':'white'});}//当复选框没有被勾选时，当前行的 H 列单元格的背景色变成白色

复制代码

注：当报表中有横向扩展的数据列时，JS 中$('td[id^=H'+row+'-0-0]')的 H 为报表预览时扩展后的 H 列，并非是设计器中的 H 列。

2.3 预览效果

保存模板，点击填报预览，PC 端效果如下所示：

注：此 JS 不支持移动端使用

3. 模板下载

模板效果在线查看请点击：JS 实现改变复选框选中行中指定单元格背景色.cpt

已完成的模板，可参见：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\填报预览JS实例\29-JS实现改变复选框选中行中指定单元格背景色.cpt

点击下载模板：29-JS实现改变复选框选中行中指定单元格背景色.cpt

如果有插入行，点击插入行之后 有颜色的会被重置