PHP循环生成表格：点击保存按钮获取对应行表单值的问题

通过PHP的foreach循环生成表格行，每行包含表单与保存按钮，点击按钮时需将当前行的regular_hours输入框值、shift_type下拉框选中值，以及按钮ID通过AJAX单独发送。目前仅能成功获取按钮ID，另外两个元素的值无法正确获取。

一、当前HTML/PHP代码 #

<?php foreach ($TimesheetList = $Timesheet->GetEmployeeTimesheetDetails() as $List) { ?>
<form class="add-new-user pt-0 fv-plugins-bootstrap5 fv-plugins-framework" onsubmit="return false" novalidate="novalidate">
    <tr>
        <td><input disabled type="text" id="date_<?= $List['data_id'] ?>" class="form-control form-control-sm datePicker date" placeholder="Date" value="<?= $TimeFormat->FormatDate($List['date']); ?>"></td>
        <td><input type="text" id="regular_hours_<?= $List['data_id'] ?>" name="regular_hours[]" class="form-control form-control-sm regular_hours" placeholder="00:00" value="<?= $TimeFormat->FormatTime($List['hours_worked']); ?>"></td>
        <td>
            <select id="shift_type_<?= $List['data_id'] ?>" name="shift_type[]" class="form-control form-control-sm shift_type">
                <option value="" disabled selected>Select Shift</option>
                <?php foreach ($Effortlist = $Effort->GetShiftTypes() as $Shift){ ?>
                   <option value="<?= $Shift['id']; ?>"><?= $Shift['title']; ?></option>
                <?php }; ?>
            </select>
        </td>
        <td>
            <button type="submit" id="<?= isset($List['data_id']) ? $List['data_id'] : ''; ?>" name="editTimesheet" class="btn btn-icon btn-primary btn-sm editTimesheet">
            <span class="tf-icons bx bx-save"></span>
            </button>
        </td>
    </tr>
</form>
<?php }; ?>

注：原代码存在ID重复问题（多个行的regular_hours、shift_typeID相同），违反HTML规范，会导致jQuery无法精准定位元素，已先在代码中给ID添加data_id后缀保证唯一性。同时form直接包裹tr不符合表格结构规范，建议后续调整为将表单放在<td>内或移除表单（因按钮已通过JS绑定事件）。

二、需要获取的数据 #

• 按钮的ID（已成功获取）
• 当前行regular_hours输入框的value值
• 当前行shift_type下拉框的选中值

三、当前存在问题的jQuery代码 #

// edit timesheet
$('.editTimesheet').each(function() {
    $(this).click(function(){

        var id          = $(this).attr('id'); // 正常工作
        var regular     = $(this).attr('regular_hours'); // 无法工作：错误获取属性，而非对应输入框的值
        var shift_type  = $("#shift_type option:selected").val(); // 无法工作：ID重复导致仅能获取第一个下拉框的值
        
        var info = {
            id: id,
            regular: regular,
            shift_type: shift_type
        };
        editTimesheet(info);
    });
});

function editTimesheet(info)
{
    $.ajax(
    {
        type: "POST",
        contentType: "application/json; charset=utf-8",
        url: "../../api/office/my-timesheets/edit",
        data: JSON.stringify(info),
        cache: false,
        async: true,
        success: function (result)
        {
            if (result.success == 'true')
            {
                console.info("success");
                Swal.fire(
                {
                    type: "success",
                    title: 'Success',
                    text: 'Timesheet row edited successfully',
                    confirmButtonClass: 'btn btn-warning',
                }).then((result) =>
                {
                    location.reload();
                });
            }
        },
        error: function (result)
        {
            console.info("Error");
            toastr.warning('System Error 47001. Cannot connect to server to process your request.');
        },
    });
}

四、修正后的解决方案 #

核心思路 #

1. 保证页面元素ID唯一性（已在HTML中修正）
2. 通过按钮的DOM关系，向上找到当前行的容器（如form或tr），再在容器内精准查找对应元素，避免全局选择导致的错误

修正后的jQuery代码 #

// edit timesheet
$('.editTimesheet').click(function(){
    var $btn = $(this);
    var id = $btn.attr('id');
    // 找到当前按钮所在的表单容器
    var $container = $btn.closest('form');
    
    // 在容器内查找对应类名的元素，获取值
    var regular = $container.find('.regular_hours').val();
    var shift_type = $container.find('.shift_type').val();

    var info = {
        id: id,
        regular: regular,
        shift_type: shift_type
    };
    editTimesheet(info);
});

// 保留原有的editTimesheet函数不变
function editTimesheet(info)
{
    $.ajax(
    {
        type: "POST",
        contentType: "application/json; charset=utf-8",
        url: "../../api/office/my-timesheets/edit",
        data: JSON.stringify(info),
        cache: false,
        async: true,
        success: function (result)
        {
            if (result.success == 'true')
            {
                console.info("success");
                Swal.fire(
                {
                    type: "success",
                    title: 'Success',
                    text: 'Timesheet row edited successfully',
                    confirmButtonClass: 'btn btn-warning',
                }).then((result) =>
                {
                    location.reload();
                });
            }
        },
        error: function (result)
        {
            console.info("Error");
            toastr.warning('System Error 47001. Cannot connect to server to process your request.');
        },
    });
}

额外优化建议 #

• 移除包裹tr的form标签，改为在每个按钮点击时直接通过DOM遍历获取元素，避免表格结构不规范问题
• 可以给tr添加data-id="<?= $List['data_id'] ?>"属性，进一步强化行的唯一性标识

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