2021/04/30

MANUAL

FAQ:サンプルコード:選択された内容によって入力項目の色を変える

記録テーブルを作成し、分類A、数値A、Bを有効にしたうえで、「[スクリプト](/manual/table-management-script)」を新規作成し、以下のスクリプトを記載してください。 出力先には「新規作成」と「編集」をチェックして更新します。 ![image](/binaries/504da47d375c4604a47f3b92fffa2d82) |項目|表示名 |要素名 | |---|---|---| |分類A|分類A|Results_ClassA | |数値A|数値A|Results_NumA | |数値B|数値B|Results_NumB | 分類AでAを選択した場合は、数値Aの枠線を青に変更する。Bを選択した場合は、数値Bの枠線を青に変更する。未選択状態で数値A、Bの表示を戻すサンプルスクリプトです。 ##### JavaScript ``` $(document).on('change', $p.tableName() + '_ClassA', function() { var classA = $p.getControl('ClassA').val(); if(classA === 'A') { // 数値Aに対する処理 var element = document.getElementById($p.tableName() +'_NumA'); var elementStyle = element.style; elementStyle.borderColor = 'blue'; elementStyle.backgroundColor = '#f0f8ff'; // 数値Bに対する処理 var element = document.getElementById($p.tableName() +'_NumB'); var elementStyle = element.style; elementStyle.borderColor = 'transparent'; // 背景色の変更 elementStyle.backgroundColor = 'white'; } if(classA === 'B') { // 数値Bに対する処理 var element = document.getElementById($p.tableName() +'_NumB'); var elementStyle = element.style; elementStyle.borderColor = 'blue'; elementStyle.backgroundColor = '#f0f8ff'; // 数値Aに対する処理 var element = document.getElementById($p.tableName() +'_NumA'); var elementStyle = element.style; elementStyle.borderColor = 'transparent'; // 背景色の変更 elementStyle.backgroundColor = 'white'; } if(classA === '') { // 数値Aに対する処理 var element = document.getElementById($p.tableName() + '_NumA'); var elementStyle = element.style; elementStyle.borderColor = 'transparent'; elementStyle.backgroundColor = 'white'; // 数値Bに対する処理 var element = document.getElementById(($p.tableName() + '_NumB')); var elementStyle = element.style; elementStyle.borderColor = 'transparent'; // 背景色の変更 elementStyle.backgroundColor = 'white'; } }) ``` ※「$p.set」については、以下のFAQを参照してください。 https://pleasanter.net/fs/publishes/266431/edit
このページをシェアする