2021/05/12

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'; } }) ``` ## 関連情報 <div id="ManualList"><ul><li><a href="/manual/table-management-script">テーブルの管理:スクリプト</a><span>2021/05/02 up</span></li></ul></article></div><input id="SearchTextHidden" type="hidden" value="" />
このページをシェアする