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