質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

1回答

168閲覧

selectプルダウンのあるセルのと右隣のセルのコントロールの背景色を変更するには?

sakura-shi

総合スコア93

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2018/06/04 09:03

編集2022/01/12 10:55

やりたいこと

selectで『済』を選んだ場合、にcssを追加します。

a) selectのあるセルの背景色
b) aのselectの背景色
c) aのセルのinputの背景色
d) その右隣のセルのinputの背景色 ただし工程2の場合のみ

工程1と3selectを『済』に変更した場合は、aからcの背景色を赤に変更
工程1と3selectを『未処理』に変更した場合は、aからcの背景色をホワイトに変更
工程2場合、selectを『済』に変更した場合は、aからdすべての背景色を赤
工程2場合、selectを『未処理』に戻した場合は、aからdすべての背景色をホワイト

やってみたこと1

HTML

1<table> 2<tr> 3 <td> 4 メインディッシュ 5 </td> 6 <td colspan="2"> 7  工程1:野菜を切る 8 <select name="status1[0]" class="sts1"> 9 <option value="0">未処理</option> 10 <option value="1">済</option> 11  </select> 12 <input type="text" name="sub1[0]"> 13 </td> 14 <td> 15  工程2:材料を炒める 16 <select name="status2[0]" class="sts2"> 17 <option value="0">未処理</option> 18 <option value="1">済</option> 19  </select> 20 <input type="text" name="sub2[0]"> 21 </td> 22 <td> 23 <input type="text" name="comment2[0]"> 24 <td> 25 <td colspan="2"> 26 工程3:器に盛りつける 27 <select name="status3[0]" class="sts3"> 28 <option value="0">未処理</option> 29 <option value="1">済</option> 30  </select> 31 <input type="text" name="sub3[0]"> 32 </td> 33</tr> 34<tr> 35 <td> 36  副菜1 37 </td> 38 <td colspan="2"> 39  工程1:野菜を切る 40 <select name="status1[1]" class="sts1"> 41 <option value="0">未処理</option> 42 <option value="1">済</option> 43  </select> 44 <input type="text" name="sub1[1]"> 45 </td> 46 <td> 47  工程2:材料を炒める 48 <select name="status2[1]" class="sts2"> 49 <option value="0">未処理</option> 50 <option value="1">済</option> 51  </select> 52 <input type="text" name="sub2[1]"> 53 </td> 54 <td> 55 <input type="text" name="comment2[1]" class="cmt"> 56 </td> 57 <td colspan="2"> 58 工程3:器に盛りつける 59 <select name="status3[1]" class="sts3"> 60 <option value="0">未処理</option> 61 <option value="1">済</option> 62  </select> 63 <input type="text" name="sub3[1]"> 64 </td> 65</tr> 66<tr> 67 <td> 68  副菜2 69 </td> 70 <td colspan="2"> 71  工程1:野菜を切る 72 <select name="status1[2]" class="sts1"> 73 <option value="0">未処理</option> 74 <option value="1">済</option> 75  </select> 76 <input type="text" name="sub1[2]"> 77 </td> 78 <td> 79  工程2:材料を炒める 80 <select name="status2[2]" class="sts2"> 81 <option value="0">未処理</option> 82 <option value="1">済</option> 83  </select> 84 <input type="text" name="sub2[2]"> 85 </td> 86 <td> 87 <input type="text" name="comment2[2]" class="cmt"> 88 </td> 89 <td colspan="2"> 90 工程3:器に盛りつける 91 <select name="status3[2]" class="sts3"> 92 <option value="0">未処理</option> 93 <option value="1">済</option> 94  </select> 95 <input type="text" name="sub3[2]"> 96 </td> 97</tr> 98</table> 99<script> 100 101$("[name^=status]").on("change", function () { 102 $(this).parent().css("background", parseInt($(this).val()) === 1 ? "red" : "white"); 103 $(this).css("background", parseInt($(this).val()) === 1 ? "red" : "white"); 104   $(this).parent('td').next('td').css("background", parseInt($(this).val()) === 1 ? "red" : "white"); 105}); 106}); 107 108$(function () { 109 $("[name^=status] ").each(function (i, e) { 110 $(this).parent().css("background", parseInt($(e).val()) === 1 ? "red" : "white"); 111 }); 112}); 113 114</script> 115コード

やってみたこと2

HTML

1 $(this).parent().find("[name^=sub]").css("background", parseInt($(this).val()) === 1 ? "red" : "white");

その結果、工程2selectのあるセルのinputの背景色は変更された

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yambejp

2018/06/04 10:24

具体的に何をどうしたときにどういう結果を想定しているのかいまひとつ特定できません
guest

回答1

0

追記情報を見る限りこんな感じ?

javascript

1$(function(){ 2 $('[name^="status"]').on('change',function(){ 3 var color=$(this).val()=="1"?"red":"white"; 4 $(this).css("background-Color",color); 5 $(this).closest('td').css("background-Color",color); 6 $(this).closest('td').find(':text').css("background-Color",color); 7 if($(this).attr('name').match(/^status2/)){ 8 $(this).closest('td').next('td').find('input').css("background-Color",color); 9 } 10 }).trigger('change'); 11});

HTML

1<table border> 2<tr> 3 <td> 4 メインディッシュ 5 </td> 6 <td colspan="2"> 7  工程1:野菜を切る 8 <select name="status1[0]" class="sts1"> 9 <option value="0">未処理</option> 10 <option value="1">済</option> 11  </select> 12 <input type="text" name="sub1[0]"> 13 </td> 14 <td> 15  工程2:材料を炒める 16 <select name="status2[0]" class="sts2"> 17 <option value="0">未処理</option> 18 <option value="1">済</option> 19  </select> 20 <input type="text" name="sub2[0]"> 21 </td> 22 <td> 23 <input type="text" name="comment2[0]"> 24 </td> 25 <td colspan="2"> 26 工程3:器に盛りつける 27 <select name="status3[0]" class="sts3"> 28 <option value="0">未処理</option> 29 <option value="1">済</option> 30  </select> 31 <input type="text" name="sub3[0]"> 32 </td> 33</tr> 34<tr> 35 <td> 36  副菜1 37 </td> 38 <td colspan="2"> 39  工程1:野菜を切る 40 <select name="status1[1]" class="sts1"> 41 <option value="0">未処理</option> 42 <option value="1">済</option> 43  </select> 44 <input type="text" name="sub1[1]"> 45 </td> 46 <td> 47  工程2:材料を炒める 48 <select name="status2[1]" class="sts2"> 49 <option value="0">未処理</option> 50 <option value="1">済</option> 51  </select> 52 <input type="text" name="sub2[1]"> 53 </td> 54 <td> 55 <input type="text" name="comment2[1]" class="cmt"> 56 </td> 57 <td colspan="2"> 58 工程3:器に盛りつける 59 <select name="status3[1]" class="sts3"> 60 <option value="0">未処理</option> 61 <option value="1">済</option> 62  </select> 63 <input type="text" name="sub3[1]"> 64 </td> 65</tr> 66<tr> 67 <td> 68  副菜2 69 </td> 70 <td colspan="2"> 71  工程1:野菜を切る 72 <select name="status1[2]" class="sts1"> 73 <option value="0">未処理</option> 74 <option value="1">済</option> 75  </select> 76 <input type="text" name="sub1[2]"> 77 </td> 78 <td> 79  工程2:材料を炒める 80 <select name="status2[2]" class="sts2"> 81 <option value="0">未処理</option> 82 <option value="1">済</option> 83  </select> 84 <input type="text" name="sub2[2]"> 85 </td> 86 <td> 87 <input type="text" name="comment2[2]" class="cmt"> 88 </td> 89 <td colspan="2"> 90 工程3:器に盛りつける 91 <select name="status3[2]" class="sts3"> 92 <option value="0">未処理</option> 93 <option value="1">済</option> 94  </select> 95 <input type="text" name="sub3[2]"> 96 </td> 97</tr> 98</table>

投稿2018/06/04 12:09

yambejp

総合スコア114581

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問