DataTable点击编辑按钮无法获取行数据：窗口缩放后报错

数据老陈

2026-5-11

问题分析与解决方案

这大概率不是DataTable的Bug，而是你获取行数据的方式在表格布局变化时出现了兼容性问题，我来帮你拆解一下：

问题根源

当窗口缩放后，表格出现横向滚动（或触发了响应式布局）时，DataTable会对DOM结构做调整——比如把tbody放在滚动容器里、生成额外的辅助元素。你原来的代码里用$(element.target).closest('tr')定位行，这里的element.target可能指向按钮内部的子元素（比如图标），虽然最终能拿到tr，但在DOM结构变化后，这个tr可能无法被DataTable的row()方法正确关联，导致返回undefined。

另外，你对事件回调参数的使用也有点小问题：DataTable的点击事件回调第一个参数是事件对象，不是触发元素，直接用this（即触发点击的.edit按钮）来定位父级tr会更可靠。

修复方案

方案1：修正行定位逻辑（推荐）

直接用触发事件的按钮元素来定位tr，避免依赖事件对象的target：

table.on('click', '.edit', function() {
  // 用当前按钮直接获取父级tr，更稳定
  var tr = $(this).closest('tr');
  var data = table.row(tr).data();
  
  // 增加判断，避免data为undefined时报错
  if (data) {
    this.display(data.id);
  }
}.bind(this));

方案2：利用DataTable的API索引获取数据

如果你的DataTable启用了响应式或滚动功能，还可以通过事件回调里的行索引来获取数据，这种方式完全不依赖DOM结构：

table.on('click', '.edit', function() {
  // 获取当前按钮所在行的索引
  var rowIndex = table.row($(this).closest('tr')).index();
  var data = table.row(rowIndex).data();
  
  if (data) {
    this.display(data.id);
  }
}.bind(this));