JS实现填报编辑单元格背景变色

1.1 版本

1.2 预期效果

填报时，用户希望当前编辑单元格颜色突出显示，如下图所示：

1.3 实现思路

通过jQuery focus()方法实现。

2.1 报表设计

新建一张普通报表，新建数据集ds1：SELECT * FROM S产品

报表主体样式如下图所示：

2.2 设置模板Web属性

点击菜单栏「模板>模板Web属性>填报页面设置」，选择「为该模板单独设置」，勾选「直接显示控件」，如下图所示：

2.3 添加加载结束事件

点击菜单栏「模板>模板Web属性>填报页面设置」，添加加载结束事件，JS代码如下：

$("#content-container input").focus(function(){
    $(this).css("background-color","lightblue");
    //当 <#content-container input> 元素获得焦点时改变当前元素背景色为lightblue
});
$("#content-container input").blur(function(){
    $(this).css("background-color","white");
    //当 <#content-container input> 元素失去焦点时改变当前元素背景色为white
});

2.4 效果预览

保存模板，点击「填报预览」，效果如 1.2 节预期效果所示。

注：不支持移动端。

点击下载模板：JS实现改变当前编辑单元格背景色.cpt