jquery如何检测当前输入id

Question

我有一个从 yii2 生成的表格，我想进行表格输入，但在发送提交之前，输入字段有一个客户端验证。考虑一下我不知道输入 id，因为它是由 yii2 生成的。这是第一行的代码sn-p

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

截图：http://www.imagebam.com/image/569de2398154258

输入 sp2d 将检查输入 anggaran 并进行一些验证，如果 (sp2d > anggaran) 然后“sp2d 超出 anggaran 限制”

这里是用于检查该函数是否通过 onchange 触发的初始 javascript 函数

function tesbos(){

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

}

当我转到 sp2d 输入中的第 2 行时，当我检查控制台日志时，它仍然打印第 1 行的 sp2d 输入 id，当我转到任何行时如何自动/动态地获取我的输入 id？任何帮助将不胜感激

Answer 1

假设您可以更改标记，则需要将元素引用传递给点击处理程序

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