これは私がボタンのアクションイベントによって隠された値を取得しようとした単一の行のためのサンプル列であるテーブル

Question

の列に対して複数の入力タイプ隠された値の行]ボタンをクリックします

<td colspan="2"> 
    <!-- the hidden value i want to retrieve "stockitemid" and "outletid" --> 
    <!-- value i have bind from controller through model like @item.ID= stockitemid and @item.OUTLET_ID=outletid --> 
    <input type="hidden" class="itemid" name="stockitemid" value="@item.ID"/> 
    <input type="hidden" class="oid" name="outletid" value="@item.OUTLET_ID"/> 
    <div class="btn-toolbar row-action"> 
     <div class="btn-group pull-right"> 
      <!-- button action given below what i have tried to display value in modal form controller. but every-time i click same value found from this event --> 
      <button class="btn btn-primary" id="btnitemaddtotray" data-toggle="modal" data-target="#addtotrayModal" title="Add Item"></button> 
     </div> 
    </div> 
</td> 

Hhereは私の検索のjqueryのコード毎回です私は、同じ「stockitemid」と「outletid」私は私が複数の行を持つテーブルから隠された値を取得したい

<script> 
    $('#btnitemaddtotray').click(function() { 
     // this is what i have tried to get row index with column index value 
     $('td').click(function() { 
      var col = $(this).parent().children().index($(this)); 
      var row = $(this).parent().parent().children().index($(this).parent()); 
      alert('Row: ' + row + ', Column: ' + col); 
     }); 
     // here is itemid and outlet id i got every-time same value. 
     var itemid = $('input[name=stockitemid]').val(); 
     var outletid =$('input[name=outletid]').val(); 
    }); 
</script> 

を取得します。

Answer 1

IDは常に各要素に対して一意である必要があるため、代わりにクラスを使用しています。 parents()を使用すると、コンテナにfind()の隠し入力があり、値を取得できます。

$('.btnitemaddtotray').on('click',function() { 
 
    
 
    var btn = $(this), 
 
     row = btn.parents('td').first(); 
 
     itemId = row.find('.itemid').val(), 
 
     oid = row.find('.oid').val(); 
 
     
 
     console.log(itemId,oid); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table><tr> 
 
<td colspan="2"> 
 
    <input type="hidden" class="itemid" name="stockitemid" value="@item.ID"/> 
 
    <input type="hidden" class="oid" name="outletid" value="@item.OUTLET_ID"/> 
 
    <div class="btn-toolbar row-action"> 
 
    <div class="btn-group pull-right"> 
 
    <button class="btn btn-primary btnitemaddtotray" data-toggle="modal" data-target="#addtotrayModal" title="Add Item">Add Item</button> 
 
    </div></div> 
 
    </td></tr> 
 
<tr> 
 
<td colspan="2"> 
 
    <input type="hidden" class="itemid" name="stockitemid" value="@item.ID2"/> 
 
    <input type="hidden" class="oid" name="outletid" value="@item.OUTLET_ID2"/> 
 
    <div class="btn-toolbar row-action"> 
 
    <div class="btn-group pull-right"> 
 
    <button class="btn btn-primary btnitemaddtotray" data-toggle="modal" data-target="#addtotrayModal" title="Add Item">Add Item</button> 
 
    </div></div> 
 
    </td></tr> 
 
</table>