本文讲解如何通过事件委托和 dom 遍历，确保点击某行的按钮后，仅更新该行对应的数据显示区域（如 ``），避免全局覆盖所有行的数据。核心在于利用 `closest("tr")` 定位当前行，再精准查找目标元素。
在实际开发中，当表格包含多行可交互数据（如“获取详情”按钮）时，一个常见误区是：使用全局选择器（如 $('.data').html(...)）更新内容，导致所有行的 .data 元素被统一赋值——这正是原代码中“点击第 5 行按钮却影响所有行”的根本原因。
要实现“按行独立响应”，关键在于建立事件源（按钮）与同属一行的目标元素之间的上下文关联。推荐两种现代、健壮的实现方式：
✅ 方案一：jQuery（精简优化版）
$('.getdata[data-id]').on('click', function() {
const $btn = $(this);
const id = $btn.data('id');
$.get('log.php', { id })
.done(function(data) {
// ✅ 精准定位：从按钮向上找最近的<tr>，再向下找本行内的.data
$btn.closest('tr').find('.data').html(data); // 注意：此处应使用返回的data，而非id（除非后端仅返回id）
})
.fail(function(xhr) {
console.error('请求失败:', xhr.status, xhr.statusText);
});
});? 提示：$btn.closest('tr') 比 $(this).parent().parent() 更健壮，能适应 HTML 结构微调（如 <td> 内嵌 <div>）。
✅ 方案二：原生 JavaScript（推荐，无依赖）
document.querySelector('table').addEventListener('click', async function(e) {
const btn = e.target.closest('button.getdata[data-id]');
if (!btn) return; // 忽略非目标元素点击
const id = btn.dataset.id;
const url = `log.php?id=${encodeURIComponent(id)}`;
try {
const res = await fetch(url);
if (!res.ok) throw new Error(`HTTP ${res.status}`);
const data = await res.text();
// ✅ 精准更新：定位本行 .data 元素
const dataEl = btn.closest('tr').querySelector('.data');
if (dataEl) dataEl.innerHTML = data;
} catch (err) {
console.error('数据加载失败:', err);
}
});⚠️ 注意事项：
? 总结
无论选用 jQuery 还是原生方案，核心原则不变：以触发事件的元素为起点，通过 DOM 层级关系（closest() → find() / querySelector()）建立行内作用域。这不仅解决了“多行数据错乱显示”问题，更提升了代码可维护性与扩展性。建议新项目优先采用原生方案，兼顾性能与现代标准支持。
