実現したいこと
テーブルに表示しているテキストボックスのValueの値を変えると、その行（ｔｒ）の
バックグラウンドカラーが変更される処理について考えています。
前提
下記のようにテーブルに複数のテキストとセレクトボックスが配置され、それを一つでも変更
するとその行のバックグラウンドカラーが変更される仕組みを考えているのですが可能なのでしょうか？
一番右端の「０」がフラグになっており、変更されると「１」に変えて「１」の行のバックグラウンドからーが
変更される感じで考えています。
調べるとフォーカスをあてると色が変わったりするサンプルはあるのですが、テキストボックスの値を変えての手法がなく
困っています。
どのように組めば実現できるのかいまいちよくわからないです。。
どなたかお力頂けないでしょうか？
HTML
1 <table class="detailList" cellpadding="5" id="tbl" border=""> 2 <thead> 3 <tr> 4 <th class="headeritemNo" rowspan="2"></th> 5 <th class="headeritemOrder" rowspan="2"></th> 6 <th class="headerLeft" colspan="2" align="center">【変換前】</th> 7 <th class="headerCenter" rowspan="2" align="center">【項目パターン】</th> 8 <th class="headerRight" colspan="2" align="center">【変換後】</th> 9 <th class="headerError" rowspan="2" align="center">【エラー／警告】</th> 10 <th class="headerError" rowspan="2" align="center">削除</th> 11 <th class="headereditFlg" rowspan="2"></th> 12 </tr> 13 <tr> 14 <th class="headerLeft">[項目]</th> 15 <th class="headerLeft">[値]</th> 16 <th class="headerRight">[項目]</th> 17 <th class="headerRight">[値]</th> 18 </tr> 19 </thead> 20 <tbody id="bodyTbl"> 21 <c:forEach var="DCDList" items="${DCDList}" varStatus="s"> 22 <tr> 23 <td class="itemno_text"> 24 <input type="text" id="" class="itemno" name="itemno" value="${DCDList.getT_item_no()}" style="background-color: transparent; border: none; width: 10px;"> 25 </td> 26 <td class="date"> 27 <input type="text" size="1" class="orderval" name="itemorder" id="orderID${s.count}" value="${DCDList.getT_item_order()}" readonly style="background-color: transparent; border: none;"> 28 </td> 29 <td class="date input_text"> 30 <input type="text" id="" class="inputval" name="input" value="${DCDList.getT_input()}" readonly style="background-color: transparent; border: none;"></td> 31 <td class="date input_text"> 32 <input type="text" id="" class="inputval" name="inputdata" value="${DCDList.getT_input_date()}" readonly style="background-color: transparent; border: none;"></td> 33 <td class="date"> 34 <select name="itemPatern" id="itemSelect" class="selectval" disabled style="margin: 0 auto; "> 35 <c:forEach var="IPMList" items="${IPMList}" varStatus="s"> 36 <option value="${IPMList.getM_item_pattern_no()}" 37 <c:if test="${IPMList.getM_item_pattern_no() == DCDList.getT_item_pattern_no()}">selected</c:if>> 38 <c:out value="${IPMList.getM_item_pattern_name()}" /></option> 39 </c:forEach> 40 </select></td> 41 <td class="date input_text"> 42 <input type="text" id="" class="inputval" name="output" value="${DCDList.getT_output()}" readonly style="background-color: transparent; border: none;"> 43 </td> 44 <td class="date input_text"> 45 <input type="text" id="" class="inputval" name="outputdata" value="${DCDList.getT_output_date()}" readonly style="background-color: transparent; border: none;"> 46 </td> 47 <td class="date"> 48 <input type="text" id="" class="errorval" value="${DCDList.getT_error_content()}" readonly style="background-color: transparent; border: none;"> 49 </td> 50 <td class="date"> 51 <p>削除</p> 52 <td> 53 54 <td class="editflg_text"> 55 <input type="text" id="" class="errorval" name="editflg" value="${DCDList.getT_editflg()}" readonly style="background-color: transparent; border: none; width: 10px;"> 56 </td> 57 </tr> 58 </c:forEach> 59 </tbody> 60 </table>
0 コメント