実現したいこと
テーブルに配置しているテキストボックスから、そのテキストボックスを
フォーカスアウトすると、その行(tr)のにあるセルの情報を取得したいと考えています。
前提
テキストボックスを配置している、テーブルからテキストボックスのフォーカスアウトをすることで
その行のセルの情報を取得することは可能なのでしょうか?
下記の図から、テキストボックスに文字を入力して、その文字と左にある番号2つ取得しJava Scriptで処理したいと考えています
どなたかお力添え頂けないでしょうか?
該当のソースコード
HTML JavaScript
1 <table class="detailList" cellpadding="5" id="tbl" border=""> 2 <thead> 3 <tr> 4 <th class="headeritemNo" rowspan="2" visibility:collapse;></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" visibility:collapse;> 24 <input type="text" id="" class="itemno" name="itemno" value="${DCDList.getT_item_no()}" style="background-color: transparent; border: none; width: 30px;"> 25 </td> 26 <td> 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;" onchange="" > 28 </td> 29 <td> 30 <input type="text" id="" class="" name="input" value="${DCDList.getT_input()}" readonly style="background-color: transparent; border: none;" onchange=""></td> 31 <td> 32 <input type="text" id="" class="" name="inputdata" value="${DCDList.getT_input_date()}" readonly style="background-color: transparent; border: none;" onchange=""></td> 33 <td> 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> 42 <input type="text" id="" class="inputval" name="output" value="${DCDList.getT_output()}" readonly style="background-color: transparent; border: none;" onchange=""> 43 </td> 44 <td> 45 <input type="text" id="" class="inputval" name="outputdata" value="${DCDList.getT_output_date()}" readonly style="background-color: transparent; border: none;" onchange=""> 46 </td> 47 <td> 48 <input type="text" id="" class="errorval" value="${DCDList.getT_error_content()}" class="errorContent" style="background-color: transparent; border: none;"> 49 </td> 50 <td> 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>
JavaScript
1 $(".orderval").focusin(function () {2 console.log("focus!");3 });4 $(".orderval").focusout(function () {5 console.log("focusout!");6 var Focus_flg = document.getElementById("FocusFlg");7 Focus_flg.value = "1";8 $("#cForm").submit();9 });
0 コメント