本文详解如何在 php 动态渲染的多行表格中，为每个“保存”按钮绑定独立事件，并精准获取其所在行的 input 和 select 元素值，避免 id 冲突与 dom 查找失效问题。
本文详解如何在 php 动态渲染的多行表格中，为每个“保存”按钮绑定独立事件，并精准获取其所在行的 input 和 select 元素值，避免 id 冲突与 dom 查找失效问题。
在实际开发中，使用 PHP foreach 循环生成含表单控件的 HTML 表格时，若对所有 <input> 或 <select></select> 元素使用静态重复 ID（如 id="regular_hours"），将严重违反 HTML 规范——ID 必须全局唯一。这会导致 jQuery 的 $('#regular_hours') 始终只匹配第一个元素，后续行的值无法正确读取，正是您遇到 regular_hours 和 shift_type 获取失败的根本原因。
✅ 正确做法是：为每行控件生成带唯一标识的动态 ID。推荐以数据库主键（如 $List['data_id']）作为后缀，确保每个 ID 全局唯一：
<?php foreach ($TimesheetList = $Timesheet->GetEmployeeTimesheetDetails() as $List) { ?>
<form class="add-new-user pt-0 fv-plugins-bootstrap5 fv-plugins-framework" onsubmit="return false">
<tr>
<td><input disabled type="text"
id="date_<?= $List['data_id']; ?>"
class="form-control form-control-sm datePicker 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">
<option value="" disabled selected>Select Shift</option>
<?php foreach ($Effort->GetShiftTypes() as $Shift) { ?>
<option value="<?= $Shift['id']; ?>"><?= htmlspecialchars($Shift['title']); ?></option>
<?php } ?>
</select>
</td>
<td>
<button type="submit"
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 } ?>? 关键改进说明：
jQuery 1.12.4下载jQuery 1.12.4是jQuery 1.x系列的最后一个正式稳定版本，由jQuery团队于2016年发布。该版本主要面向需要兼容旧版浏览器环境的网站和Web应用，尤其适用于仍需支持Internet Explorer 6、Internet Explorer 7、Internet Explorer 8等老旧浏览器的项目。
- 使用
id="regular_hours_= $List['data_id']; ?>"替代固定id="regular_hours"；- 将按钮的
id属性替换为更语义化的data-id（避免 ID 用于非唯一标识场景），提升可维护性；- 对
option文本使用htmlspecialchars()防止 XSS；- 移除冗余的
novalidate="novalidate"（onsubmit="return false"已禁用默认提交）。
对应地，JavaScript 需基于按钮的 data-id 动态拼接目标元素 ID 进行精准查找：
$('.editTimesheet').on('click', function(e) {
e.preventDefault(); // 推荐替代 onsubmit="return false"
const dataId = $(this).data('id'); // 获取 data-id 值（自动类型转换）
// ✅ 正确：根据 data-id 拼接并查找当前行控件
const regularHours = $('#regular_hours_' + dataId).val();
const shiftType = $('#shift_type_' + dataId).val(); // .val() 直接获取选中 option 的 value
const info = {
id: dataId,
regular: regularHours,
shift_type: shiftType
};
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,
success: function(result) {
if (result.success === 'true') {
Swal.fire({
icon: "success",
title: 'Success',
text: 'Timesheet row edited successfully',
confirmButtonClass: 'btn btn-warning'
}).then(() => location.reload());
}
},
error: function() {
toastr.warning('System Error 47001. Cannot connect to server.');
}
});
}⚠️ 注意事项：
- ❌ 避免
.each()套.click()：原代码中$('.editTimesheet').each(...).click(...)会为每个按钮重复绑定事件，造成性能浪费和逻辑混乱；应直接使用事件委托或单次绑定。- ✅ 使用
.data('id')而非.attr('data-id')：jQuery.data()自动处理类型转换与缓存，更健壮。- ✅
$('#shift_type_X').val()可直接获取选中值，无需find(':selected').val()，更简洁可靠。- ?️ 后端接收时需校验
info.id是否合法、regular是否符合时间格式、shift_type是否在白名单内，防止恶意提交。
通过以上结构化改造，您将获得一个可扩展、无 ID 冲突、事件解耦清晰的多行编辑方案，彻底解决“只能取到第一行数据”的典型陷阱。
