selectプルダウンの背景色および右隣りのセルの背景色を変更するには？

やりたいこと

selectプルダウンで、いずれかを『済』に変更した場合に
プルダウンのあるセルおよび右隣りのセルの背景色を赤に変更したい
いったんプルダウンを変更しても、『済』以外に戻した場合は、ホワイトにしたい。

ただし、$("[name^=status]")と指定する部分なのですが、必ずstatus[0]の場合だけ、ホワイトではなく別のカラーに戻したいという指定はできるものでしょうか？

プルダウンのあるセルの右隣りのセルの指定方法がわかりません。

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

##　調べてみたこと

 $(this).next("td").css("background", "red");

行動規範の内容に同意します

回答2件

js
1$("[name^=status]").on("change", function () {
2  var color = parseInt($(this).val()) === 1 ? "red" : "white";
3  $(this).parent().css("background", color).next().css("background", color);
4});

一個目のセルはできているので、チェーンメソッドで次のセルにも同じ処理をします。

投稿2018/06/03 23:40

CODEISLE

総合スコア251

ベストアンサー

どんな構造か整理しましょう。
そのselectの親のtdの次のtdなので

js
1$("[name^=status]").on("change", function () {
2    $(this).parent().next().css("background", parseInt($(this).val()) === 1 ? "red" : "white");
3});

こっちの方がわかりやすいですかね。

js
1$("[name^=status]").on("change", function () {
2    $(this).parent('td').next('td').css("background", parseInt($(this).val()) === 1 ? "red" : "white");
3});
4

closestにすると、親のなかで一番近い要素を取得してくれるので、以下でも出来ます。

js
1$("[name^=status]").on("change", function () {
2    $(this).closest('td').next('td').css("background", parseInt($(this).val()) === 1 ? "red" : "white");
3});
4