やりたいこと
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の背景色は変更された