User Manual

08.14.2024

MANUAL

FAQ: Change the color of input fields depending on the selected content

## Answer Use "[Script](/en/manual/table-management-script)". --- ## Overview Create a record table, enable classification A, values ​​A and B, then create a new "[Script](/en/manual/table-management-script)" and write the following script. Check "Create new" and "Edit" for the output destination to update. ![image](https://pleasanter.org/binaries/bdb79b9c08834785831aaf2c050937e6) ![image](https://pleasanter.org/binaries/231fa970d19049c68ddc48b5e26ccc84) ![image](https://pleasanter.org/binaries/485c3c53b4714021af29e870ce214f92) If A is selected in classification A, change the border of value A to blue. If B is selected, change the border of value B to blue. This is a sample script that returns the display of values ​​A and B to values ​​other than A and 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': // Processing for number A $p.getControl('NumA').css(myCssBlue); // Processing for number B $p.getControl('NumB').css(myCssDefault); break; case 'B': // Processing for number B $p.getControl('NumB').css(myCssBlue); // Processing for number A $p.getControl('NumA').css(myCssDefault); break; default: // Processing for number A $p.getControl('NumA').css(myCssDefault); // Processing for number B $p.getControl('NumB').css(myCssDefault); break; } }); ``` ## Related Information <div id="ManualList"><ul><li><a href="/en/manual/table-management-script">Table Management: Script</a><span>08.13.2024 up</span></li></ul></article></div><input id="SearchTextHidden" type="hidden" value="" />
TOP
このページをシェアする
記載された商品名、各製品名は各社の登録商標または商標です。 © Implem Inc.