如何提交每一行代码？

Question

我需要提交每一行代码，但它只实际上只提交了第一行。无论怎么单击Submit按钮，它都只执行该特定行......我该怎么解决这个问题？

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

// my form ：

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

// submit code

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

First, you need to ensure that any ids you have in the DOM are unique. Right now, you're using id="btnSave", id="attendance", and id="loan" repeatedly in the table. But your click handler is set up correctly (using delegation and .item-edit), and as far as I can tell you can just get rid of those IDs.

Within the click handler, use this or event.currentTarget to refer to the button that was clicked. You can get the row for that button by using closest("tr"). Then you can find the attendance and loan inputs via find using their names.

So for instance:

$(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);

    });
});

Live Example:

$(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);

    });
});

var data = [
    {emp_name: "Joe Bloggs", cat_name: "cat1", emp_account_number: 1234},
    {emp_name: "Muhammad Al-Rashad", cat_name: "cat2", emp_account_number: 5678},
    {emp_name: "Elena Gonsalez", cat_name: "cat2", emp_account_number: 9876}
];
// 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" name="attendance" placeholder="Attendance" required>' +
        '</td>' +
        '<td>1</td>' +
        '<td>' +
        '<input type="text" class="form-control" name="loan" placeholder="Loan" required>' +
        '</td>' +
        '<td>' +
        '<a href="javascript:;" class="btn btn-primary item-edit">Submit</a>' +
        '</td>' +

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

<div id="salaryData"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

</div>