我们如何提交每一行

Question

我需要提交每个循环的行。在我目前的情况下，它仅提交我的第一行。只要单击“提交”按钮，它就应该仅执行该特定行。我该如何解决？

屏幕截图：https://ibb.co/x8y6X94

//我的表格

 <form action="">
                <table class="table table-hover table-centered m-0 table-bordered">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Designation</th>
                            <th>Account Number</th>
                            <th>Attendance</th>
                            <th>Rate</th>
                            <th>Loan </th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody id="salaryData">
                    </tbody>
                </table>
                </form>

下面的代码显示，从数据库读取数据，并且该数据插入到tbody中，tbody id为#salaryData

success: function(data) {
                    // alert('test');
                    var html = '';
                    var i;
                    for (i = 0; i < data.length; i++) {
                        html += '<tr>' +

                            '<td>' + data[i].emp_name + ' </td>' +
                            '<td>' + data[i].cat_name + '</td>' +
                            '<td>' + data[i].emp_account_number + '</td>' +
                            '<td>' +
                            '<input type="text" class="form-control" id="attendance"  name="attendance" placeholder="Attendance" required>' +
                            '</td>' +
                            '<td>1</td>' +
                            '<td>' +
                            '<input type="text" class="form-control" id="loan"  name="loan" placeholder="Loan" required>' +
                            '</td>' +
                            '<td>' +
                            '<a href="javascript:;" class="btn btn-primary item-edit" id="btnSave">Submit</a>' +
                            '</td>' +

                            '</tr>';
                    }
                    $('#salaryData').html(html);

//提交代码

$(function() {

    $('#salaryData').on('click', '.item-edit', function() {
        var row = $(this).closest("tr")
        var attendance = row.find("[name=attendance]").val();
        var loan = row.find("[name=loan]").val();

        $.ajax({
                type : "POST",
                url  : "<?php echo site_url('con_salary/testSalary')?>",
                dataType : "JSON",
                data : {attendance:attendance , loan:loan},
                success: function(data){
                    if(data==1 ){
                        $('#btnSave').prop('disabled', false);


                    }
                    else{
                        $('#btnSave').prop('disabled', true);

                    }
                }
            });
            return false;




    });
});

Answer 1

首先，您需要确保DOM中的任何id 是唯一的。现在，您正在表中重复使用id="btnSave"，id="attendance"和id="loan"。但是您的点击处理程序已正确设置（使用委托和.item-edit），据我所知，您可以删除这些ID。

在单击处理程序中，使用this或event.currentTarget引用被单击的按钮。您可以使用closest("tr")获得该按钮的行。然后，您可以使用closest("tr")通过find查找出勤和借贷输入。

例如：

find

实时示例：

name

$(function() {

    $('#salaryData').on('click', '.item-edit', function() {
        var row = $(this).closest("tr");
        var attendance = row.find("[name=attendance]").val();
        var loan = row.find("[name=loan]").val();

        alert(attendance);

    });
});