jquery如何檢測當前輸入ID

Question

我有一個從yii2生成的表，我想做一個表格輸入，但在發送提交之前，有一個客戶端驗證輸入字段。考慮我不知道輸入ID，因爲它是由yii2生成的。這裏的第一行的代碼片段

<tr class="kv-tabform-row" data-key="4"> 
    <td class="kv-align-center kv-align-middle">1</td> 
    <td class="kv-grid-hide kv-align-top"> 
     <div class="form-group field-kegbulan-4-id"> 
      <input type="hidden" id="kegbulan-4-id" class="form-control" name="KegBulan[4][id]" value="4"> 
      <div class="help-block"></div> 
     </div> 
    </td> 
    <td class="kv-grid-hide kv-align-top"> 
     <div class="form-group field-kegbulan-4-id_keg_ta_uk required"> 
      <input type="hidden" id="kegbulan-4-id_keg_ta_uk" class="form-control" name="KegBulan[4][id_keg_ta_uk]" value="6"> 
      <div class="help-block"></div> 
     </div> 
    </td> 
    <td class="kv-align-middle" style="width:300px;">Pengadaan Barang Kuasi, Buku Uji, Plat Uji dan Stiker Uji</td> 
    <td class="kv-align-middle"> 
     <input type="text" id="kegbulan-4-anggaran" class="anggaran" name="KegBulan-[4][anggaran]" value="300,000,000" disabled="disabled" style="width:100px;"></td> 
    <td class="kv-align-top"> 
     <div class="form-group field-kegbulan-4-sp2d required"> 
      <input type="text" id="kegbulan-4-sp2d" class="form-control sp2d" name="KegBulan[4][sp2d]" value="680000" onchange="tesbos()"> 
      <div class="help-block"></div> 
     </div> 
    </td> 
    <td class="kv-align-top" style="width:70px;"> 
     <div class="form-group field-kegbulan-4-persen_sp2d required"> 
      <input type="text" id="kegbulan-4-persen_sp2d" class="form-control" name="KegBulan[4][persen_sp2d]" value="2"> 
      <div class="help-block"></div> 
     </div> 
    </td> 
    <td class="kv-align-top"> 
     <div class="form-group field-kegbulan-4-spj required"> 
      <input type="text" id="kegbulan-4-spj" class="form-control" name="KegBulan[4][spj]" value="680000"> 
      <div class="help-block"></div> 
     </div> 
    </td> 
    <td class="kv-align-top" style="width:70px;"> 
     <div class="form-group field-kegbulan-4-persen_spj required"> 
      <input type="text" id="kegbulan-4-persen_spj" class="form-control" name="KegBulan[4][persen_spj]" value="2"> 
      <div class="help-block"></div> 
     </div> 
    </td> 
    <td class="kv-align-top" style="width:70px;"> 
     <div class="form-group field-kegbulan-4-target required"> 
      <input type="text" id="kegbulan-4-target" class="form-control" name="KegBulan[4][target]" value="0"> 
      <div class="help-block"></div> 
     </div> 
    </td> 
    <td class="kv-align-top" style="width:70px;"> 
     <div class="form-group field-kegbulan-4-pfisik required"> 
      <input type="text" id="kegbulan-4-pfisik" class="form-control" name="KegBulan[4][pfisik]" value="10"> 
      <div class="help-block"></div> 
     </div> 
    </td> 
    <td class="skip-export kv-align-center kv-align-middle" style="width:60px;"><a href="/yii2/yii-application/frontend/web/keg-bulan/view?id=4" title="View" data-pjax="0"> 
    <span class="glyphicon glyphicon-eye-open"></span></a> <a href="/yii2/yii-application/frontend/web/keg-bulan/update?id=4" title="Update" data-pjax="0" style="display:none;"> 
    <span class="glyphicon glyphicon-pencil"></span></a> <a href="/yii2/yii-application/frontend/web/keg-bulan/delete?id=4" title="Delete" data-confirm="Are you sure to delete this item?" data-method="post" data-pjax="0"> 
    <span class="glyphicon glyphicon-trash"></span></a></td> 
    <td class="skip-export kv-align-center kv-align-middle kv-row-select" style="width:50px;"> 
    <input type="checkbox" name="selection[]" value="4"></td> 
</tr> 

screenshoot：http://www.imagebam.com/image/569de2398154258

輸入SP2D將檢查輸入anggaran並做一些驗證，如果（SP2D> anggaran），那麼 「SP2D超過anggaran限制」

這裏最初的JavaScript函數來檢查功能通過平變化

function tesbos(){ 

    var sp2d = $(".sp2d").attr("id"); 
    console.log(sp2d); 

} 

觸發，當我去排在SP2D輸入2號，STI當我檢查我的控制檯日誌時，它仍然會打印第1行的sp2d輸入ID，如何在我進入任何行時自動/動態地獲取我的輸入ID？任何幫助，將不勝感激

Answer 1

假設你可以改變的標記，你需要的元素refernce傳遞到單擊處理

<input type="text" id="kegbulan-4-sp2d" class="form-control sp2d" name="KegBulan[4][sp2d]" value="680000" onchange="tesbos(this)"> 

然後

function tesbos(el) { 
    alert(el.id) 
} 

---

但我會建議使用jQuery事件處理程序，而不是內聯的，所以從標記中刪除onchange=""

<input type="text" id="kegbulan-4-sp2d" class="form-control sp2d" name="KegBulan[4][sp2d]" value="680000"> 

然後

jQuery(function($){ 
    $(".sp2d").change(function(){ 
     alert(this.id) 
    }) 
}) 

Answer 2

如果我理解正確的話，你的表的每一行包括：

• 一個anggaran（預算）字段[固定值]
• 一個sp2d（花至今）字段[用戶輸入]。

而且要執行檢查，每sp2d的變化（花至今）值對其相應anggaran（預算）值。

爲此，您不需要知道任何字段的ID。只需找到anggaran字段相對於哪個sp2d字段觸發更改事件。

首先，從HTML中刪除onchange="tesbos()"。

然後粘貼到文檔的HEAD <script></script>標籤之間的代碼（或.js文件，如果你的代碼被組織這樣）。

jQuery(function($) { 
    $("#containerID").on('change', ".sp2d", tesbos); // where containerID is the ID of eg. a DIV in which the YII table sits 

    function tesbos() { 
     var sp2d_value = $(this).val(); 
     var anggaran_value = $(this).closest("tr").find(".anggaran").val();//find the anggaran field in the same row, and grab its value. 

     console.log(anggaran_value, sp2d_value); 

     if(sp2d_value > anggaran_value) { 
      //anggaran is exceeded 
      ... 
     } else { 
      //anggaran is not exceeded 
      ... 
     } 
    } 
});