獲取多個輸入型隱藏價值排按鈕，點擊列在表

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」和「不合格」

<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>