表格每行独立提交实现方案？当前仅提交首行问题解决

Hey there! I see the issue you're facing—when clicking each row's Submit button, only the first row's data is being submitted. Let's break down the problems and fix them step by step.

Key Issues in Your Current Code #

1. Duplicate IDs: You're generating multiple elements with the same id (like attendance, loan, btnSave) in your loop. IDs must be unique across the entire page, so using the same ID for multiple elements causes jQuery to only select the first matching element.
2. Incorrect Button State Handling: When trying to disable/enable the Submit button, you're targeting $('#btnSave'), which again only selects the first button with that ID instead of the one that was clicked.

Corrected Code Implementation #

Step 1: Update the Dynamic HTML Generation #

Remove the duplicate IDs from your input fields and submit button (we'll use classes and relative selection instead):

success: function(data) {
    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 attendance" name="attendance" placeholder="Attendance" required>' +
            '</td>' +
            '<td>1</td>' +
            '<td>' +
            '<input type="text" class="form-control loan" name="loan" placeholder="Loan" required>' +
            '</td>' +
            '<td>' +
            '<a href="javascript:;" class="btn btn-primary item-edit">Submit</a>' +
            '</td>' +
            '</tr>';
    }
    $('#salaryData').html(html);

Step 2: Fix the Submit Event Handler #

Update the click event to target the clicked button specifically, and use relative traversal to get the row's input values:

// 提交代码
$(function() {
    $('#salaryData').on('click', '.item-edit', function(e) {
        e.preventDefault(); // Prevent default link behavior
        const $btn = $(this); // Store reference to the clicked button
        const $row = $btn.closest("tr");
        const attendance = $row.find(".attendance").val();
        const loan = $row.find(".loan").val();

        // Disable the button immediately to prevent duplicate submissions
        $btn.prop('disabled', true);

        $.ajax({
            type: "POST",
            url: "<?php echo site_url('con_salary/testSalary')?>",
            dataType: "JSON",
            data: { attendance: attendance, loan: loan },
            success: function(data) {
                if (data == 1) {
                    // If submission is successful, keep it disabled or update as needed
                    $btn.prop('disabled', true);
                    // Optional: Add success feedback, e.g., change button text
                    $btn.text('Submitted');
                } else {
                    // If failed, re-enable the button to allow retries
                    $btn.prop('disabled', false);
                }
            },
            error: function() {
                // Re-enable button if AJAX request fails
                $btn.prop('disabled', false);
            }
        });
        return false;
    });
});

What Changed? #

• Removed Duplicate IDs: Replaced id="attendance" with class="attendance" and id="loan" with class="loan"; removed id="btnSave" since we're using the .item-edit class.
• Relative Element Selection: Used $(this) to reference the exact button that was clicked, then traversed up to its parent row with .closest("tr") to get only that row's input values.
• Improved Button State Handling: Disabled the clicked button right away to prevent duplicate submissions, and only updated that specific button's state based on the AJAX response.
• Added Error Handling: Included an error callback to re-enable the button if the AJAX request fails (e.g., network issues).

This way, each Submit button will only handle the data from its own row, and you won't run into issues with duplicate IDs causing incorrect element selection.

内容的提问来源于stack exchange，提问作者Vishnu Jayaraj