本文讲解如何使用 jQuery 为通过 AJAX 动态加载的表格行（<tr>）实现单击高亮样式切换，并安全获取其自定义属性（如 productId），同时确保仅高亮当前点击行、自动取消之前高亮，适用于 PHP 循环生成的重复 DOM 结构。
本文讲解如何使用 jquery 为通过 ajax 动态加载的表格行（`
在实际开发中，使用 PHP 循环拼接 HTML 并通过 AJAX 插入页面时，常会遇到 DOM 元素动态创建、事件绑定失效的问题。您原始代码存在多个关键问题：
- ID 重复冲突：HTML 中 id="productTableRow" 在循环中被多次使用，违反了 id 的唯一性规范，导致 $(e.target).is('#productTableRow') 行为不可靠；
- 事件委托误用：$(document).on('click', function(e){...}) 监听全局点击，再手动判断目标，效率低且易误判；
- 逻辑冗余：if(productId == productId) 恒为真，无实际分支意义；
- 状态管理缺失：未记录上一次点击的行，无法实现“仅高亮当前行、恢复其他行”的交互需求。
✅ 正确做法是：
- 将 id 改为 class（如 class="productTableRow"），保证语义合法且可批量选择；
- 使用事件委托绑定到 .productTableRow，精准捕获目标行点击；
- 维护一个引用变量（如 oldObject）追踪上次高亮的 <tr> 元素，实现单选互斥效果；
- 统一处理样式重置与新样式应用，避免残留高亮。
以下是完整、健壮的解决方案：
// 声明全局变量用于跟踪上一次点击的行（注意：需在作用域内初始化）
let oldObject = null;
// 使用事件委托监听动态插入的 .productTableRow 行
$(document).on('click', '.productTableRow', function() {
// 若存在上一次高亮的行，先清除其背景色
if (oldObject) {
$(oldObject).css('background-color', 'transparent');
}
// 获取当前点击行的 productId 属性值
const productId = $(this).attr('productId');
// 设置当前行背景色（推荐使用 CSS 类而非内联样式，更易维护）
$(this).css('background-color', '#128C7E');
// 将当前行 DOM 元素赋值给 oldObject，供下次使用
oldObject = this;
// 可选：将 productId 写入隐藏输入框（假设其 id 为 #selectedProductId）
$('#selectedProductId').val(productId);
});? 配套 PHP 修改建议（关键！）：
请将您的 PHP 循环中 <tr id='productTableRow' ...> 改为：
foreach ($products as $product) {
$responseData .= "<tr class='productTableRow' data-product-id='" . htmlspecialchars($product->id) . "'>";
// ... 其他 <td> 内容保持不变 ...
$responseData .= "</tr>";
}✅ 改进点说明：
- class="productTableRow" 替代 id，符合 HTML 规范；
- 使用 data-product-id（标准 data-* 属性）替代自定义 productId，语义更清晰、兼容性更好；
- htmlspecialchars() 防止 XSS 风险（尤其当 $product->id 可能含特殊字符时）；
- 对应 JS 中获取方式改为：$(this).data('product-id')（jQuery 自动解析 data-* 属性，更可靠）。
? 增强版推荐（使用 CSS 类 + data API）：
$(document).on('click', '.productTableRow', function() {
// 移除所有行的高亮类，再为当前行添加
$('.productTableRow').removeClass('row-selected');
$(this).addClass('row-selected');
const productId = $(this).data('product-id');
$('#selectedProductId').val(productId);
});并在 CSS 中定义：
.row-selected {
background-color: #128C7E !important;
}? 注意事项总结：
- ✅ 该事件绑定必须在 DOM 加载完成后执行（若写在 <script> 标签中，建议包裹在 $(document).ready(...) 内；若已确认 DOM 就绪，可省略）；
- ✅ 若表格内容后续还会通过 AJAX 重新加载，无需重复绑定事件——$(document).on(...) 天然支持动态元素；
- ❌ 避免在循环中为每行单独绑定 .click()，会造成内存泄漏和性能下降；
- ✅ 生产环境强烈建议用 data-* 属性 + CSS 类控制样式，而非直接操作 .css()，便于主题切换与维护。
按此方案改造后，即可实现：点击任意产品行 → 仅该行变色 → 对应 productId 自动填入隐藏字段 → 再次点击其他行时，前一行自动还原，交互清晰、代码健壮、易于扩展。
