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 
      ... 
     } 
    } 
});