ユーザマニュアル




2024/07/08

MANUAL

FAQ:選択された内容によって入力項目の色を変える

## 回答 [スクリプト](/ja/manual/table-management-script)を使用します。 --- ## 概要 記録テーブルを作成し、分類A、数値A、Bを有効にしたうえで、[スクリプト](/ja/manual/table-management-script)を新規作成し、以下のスクリプトを記載してください。 出力先には「新規作成」と「編集」をチェックして更新します。 以下は分類Aの選択により数値A、数値Bの枠線の色を変更するサンプルスクリプトです。 ##### JavaScript ``` $(document).on('change', '#' + $p.getControl('ClassA')[0].id, function() { const myClassA = $p.getControl('ClassA').val(); const myCssBlue = {'borderColor': 'blue', 'background': '#f0f8ff'}; const myCssDefault = {'borderColor': '#c0c0c0', 'background': 'white'}; switch(myClassA) { case 'A': // 数値Aに対する処理 $p.getControl('NumA').css(myCssBlue); // 数値Bに対する処理 $p.getControl('NumB').css(myCssDefault); break; case 'B': // 数値Bに対する処理 $p.getControl('NumB').css(myCssBlue); // 数値Aに対する処理 $p.getControl('NumA').css(myCssDefault); break; default: // 数値Aに対する処理 $p.getControl('NumA').css(myCssDefault); // 数値Bに対する処理 $p.getControl('NumB').css(myCssDefault); break; } }); ``` 分類Aで「A」を選択した場合は、数値Aの枠線の色が青に変更されます。 ![image](https://pleasanter.org/binaries/77abc85fcb004ac4a277a65799f39ba2) 分類Aで「B」を選択した場合は、数値Bの枠線の色が青に変更されます。 ![image](https://pleasanter.org/binaries/d300108703e64bb4999c31a5b233dd2b) 分類Aで「A」または「B」以外を選択した場合は数値A、数値Bの枠線の色が戻されます。 ![image](https://pleasanter.org/binaries/cb031599e1dc4075abc9d5747ceeb2f2) ## 関連情報 <div id="ManualList"><ul><li><a href="/ja/manual/table-management-script">テーブルの管理:スクリプト</a><span>2024/10/08 up</span></li></ul></article></div><input id="SearchTextHidden" type="hidden" value="" />
TOP
このページをシェアする
記載された商品名、各製品名は各社の登録商標または商標です。 © Implem Inc.