selectプルダウンを目的の値に変更した場合、そのセルの背景色を赤にしたい

###実現したいこと
selectプルダウンの値を『済』にした場合に、そのセルの背景色を赤にしたい

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　　工程２：材料を炒める
15    <select name="status2[0]" class="sts2">
16    <option value="0">未処理</option>
17    <option value="1">済</option>
18　　</select>
19  </td>
20  <td>
21   工程３：器に盛りつける
22    <select name="status3[0]" class="sts3">
23    <option value="0">未処理</option>
24    <option value="1">済</option>
25　　</select>
26  </td>
27  <td>
28    コメント：<input type="text" name="comment[0]" class="cmt">
29  </td>
30</tr>
31<tr>
32  <td>
33 　副菜1
34  </td>
35  <td>
36　　工程１：野菜を切る
37    <select name="status1[1]" class="sts1">
38    <option value="0">未処理</option>
39    <option value="1">済</option>
40　　</select>
41  </td>
42  <td>
43　　工程２：材料を炒める
44    <select name="status2[1]" class="sts2">
45    <option value="0">未処理</option>
46    <option value="1">済</option>
47　　</select>
48  </td>
49  <td>
50   工程３：器に盛りつける
51    <select name="status3[1]" class="sts3">
52    <option value="0">未処理</option>
53    <option value="1">済</option>
54　　</select>
55  </td>
56  <td>
57    コメント：<input type="text" name="comment[1]" class="cmt">
58  </td>
59</tr>
60<tr>
61  <td>
62 　副菜2
63  </td>
64  <td>
65　　工程１：野菜を切る
66    <select name="status1[2]" class="sts1">
67    <option value="0">未処理</option>
68    <option value="1">済</option>
69　　</select>
70  </td>
71  <td>
72　　工程２：材料を炒める
73    <select name="status2[2]" class="sts2">
74    <option value="0">未処理</option>
75    <option value="1">済</option>
76　　</select>
77  </td>
78  <td>
79   工程３：器に盛りつける
80    <select name="status3[2]" class="sts3">
81    <option value="0">未処理</option>
82    <option value="1">済</option>
83　　</select>
84  </td>
85  <td>
86    コメント：<input type="text" name="comment[2]" class="cmt">
87  </td>
88</tr>
89</table>

kszk311

2018/06/02 05:58

JSなどやってみたコードを記載してください。このままではやりたい事だけを記載した丸投げの質問になってしまいます。https://teratail.com/help/question-tips

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

回答1件

ベストアンサー

質問者さんが実現したいことは以下のように行えると思いますが、いかがでしょうか？

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

追記

toggleClassメソッド、addClassメソッド、removeClassメソッドを使った方法を追記します。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>タイトル</title>
6    <style>
7        .change {
8            background: red;
9        }
10    </style>
11</head>
12<body>
13<table>
14    <tr>
15        <td>
16            メインディッシュ
17        </td>
18        <td>
19            　　工程１：野菜を切る
20            <select name="status1[0]" class="sts1">
21                <option value="0">未処理</option>
22                <option value="1">済</option>
23            </select>
24        </td>
25        <td>
26            　　工程２：材料を炒める
27            <select name="status2[0]" class="sts2">
28                <option value="0">未処理</option>
29                <option value="1">済</option>
30            </select>
31        </td>
32        <td>
33            工程３：器に盛りつける
34            <select name="status3[0]" class="sts3">
35                <option value="0">未処理</option>
36                <option value="1">済</option>
37            </select>
38        </td>
39        <td>
40            コメント：<input type="text" name="comment[0]" class="cmt">
41        </td>
42    </tr>
43    <tr>
44        <td>
45            　副菜1
46        </td>
47        <td>
48            　　工程１：野菜を切る
49            <select name="status1[1]" class="sts1">
50                <option value="0">未処理</option>
51                <option value="1">済</option>
52            </select>
53        </td>
54        <td>
55            　　工程２：材料を炒める
56            <select name="status2[1]" class="sts2">
57                <option value="0">未処理</option>
58                <option value="1">済</option>
59            </select>
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="comment[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            　　工程２：材料を炒める
85            <select name="status2[2]" class="sts2">
86                <option value="0">未処理</option>
87                <option value="1">済</option>
88            </select>
89        </td>
90        <td>
91            工程３：器に盛りつける
92            <select name="status3[2]" class="sts3">
93                <option value="0">未処理</option>
94                <option value="1">済</option>
95            </select>
96        </td>
97        <td>
98            コメント：<input type="text" name="comment[2]" class="cmt">
99        </td>
100    </tr>
101</table>
102<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
103<script>
104    $("[name^=status]").on("change", function () {
105        $(this).parent().toggleClass("change");
106    });
107
108    $(function () {
109        $("[name^=status]").each(function (i, e) {
110            parseInt($(e).val()) === 1 ? $(e).parent().addClass("change") : $(e).parent().removeClass("change");
111        });
112    });
113</script>
114</body>
115</html>