本文详解如何为 php 循环生成的多行表格中每个“保存”按钮绑定独立事件，并准确提取当前行内 input 和 select 元素的值，避免 id 冲突与选择器失效问题。
本文详解如何为 php 循环生成的多行表格中每个“保存”按钮绑定独立事件，并准确提取当前行内 input 和 select 元素的值，避免 id 冲突与选择器失效问题。
在动态渲染的表格场景中（如 PHP foreach 生成多行表单），直接使用固定 id（如 id="regular_hours"）会导致 HTML 文档中出现多个重复 ID —— 这不仅违反 W3C 规范，更会使 jQuery 的 $('#regular_hours') 仅匹配第一个元素，造成数据错乱。正确解法是为每行元素生成唯一、可追溯的 ID，并基于按钮上下文定位同级表单控件。
✅ 正确的 HTML 结构改造（PHP 端）
首先，必须消除重复 ID。将静态 ID 改为带唯一标识（如 $List['data_id']）的动态 ID：
jQuery 1.12.4是jQuery 1.x系列的最后一个正式稳定版本，由jQuery团队于2016年发布。该版本主要面向需要兼容旧版浏览器环境的网站和Web应用，尤其适用于仍需支持Internet Explorer 6、Internet Explorer 7、Internet Explorer 8等老旧浏览器的项目。
<?php foreach ($TimesheetList = $Timesheet->GetEmployeeTimesheetDetails() as $List) { ?>
<tr>
<form class="timesheet-row-form" data-id="<?= $List['data_id'] ?>"> <!-- 推荐：用 data-* 属性标记行ID -->
<td><input disabled type="text" class="form-control form-control-sm datePicker date"
placeholder="Date"
value="<?= $TimeFormat->FormatDate($List['date']); ?>"></td>
<td><input type="text"
class="form-control form-control-sm regular_hours"
name="regular_hours"
placeholder="00:00"
value="<?= $TimeFormat->FormatTime($List['hours_worked']); ?>"></td>
<td>
<select class="form-control form-control-sm shift_type" name="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="button"
class="btn btn-icon btn-primary btn-sm editTimesheet"
data-row-id="<?= $List['data_id'] ?>">
<span class="tf-icons bx bx-save"></span>
</button>
</td>
</form>
</tr>
<?php } ?>? 关键改进：
- 移除所有
id=属性（避免重复），改用语义化class+data-*属性；- 为
<form></form>添加data-id或为按钮添加data-row-id，作为行唯一标识；- 所有输入控件统一使用
class（如regular_hours,shift_type），便于按行查找。
✅ 正确的 JavaScript / jQuery 绑定逻辑（客户端）
不再依赖全局 ID，而是利用 DOM 层级关系——从被点击的按钮出发，向上找到最近的 通过以上重构，你将获得健壮、可维护、符合标准的多行表格数据采集方案——每一行保存操作都严格作用于自身数据，彻底规避 ID 冲突与选择器越界问题。<form></form> 或 <tr>，再向下查找其内部的 <code>.regular_hours 和 .shift_type 元素：// 使用事件委托（推荐）或直接绑定
$('.editTimesheet').on('click', function(e) {
e.preventDefault();
const $btn = $(this);
const rowId = $btn.data('row-id'); // 获取当前行标识
// ✅ 安全定位：从按钮向上找最近的 form（或 tr），再查子元素
const $form = $btn.closest('form'); // 或 $btn.closest('tr').find('form')
const regularHours = $form.find('.regular_hours').val();
const shiftType = $form.find('.shift_type').val(); // .val() 自动获取选中 option 的 value
const info = {
id: rowId,
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(... $(this).click(...)) 会为每个按钮重复绑定多次事件，极易引发多次 AJAX 请求。应直接 $('.editTimesheet').on('click', ...)。id 不等于放弃唯一性：data-row-id 或 data-id 是更现代、更灵活的标识方式，且完全支持 jQuery .data() 方法。<form></form> 包裹 <tr> 违反 HTML 表格模型（<code><form></form> 不应直接嵌套 <tr>）。推荐将 <code><form></form> 移至 <tr> 外层，或改用 <code><div class="timesheet-row"> 替代 <code><form></form>，仅在提交时收集数据，而非依赖真实表单提交。regularHours 和 shiftType 是否为空，提升用户体验：if (!regularHours || !shiftType) {
toastr.warning('Please fill in all required fields.');
return;
}
