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>2023/05/18 up</span></li></ul></article></div><input id="SearchTextHidden" type="hidden" value="" />