Layui表格单元格编辑完成并失焦后怎么获取新旧值对比-Layui教程-PHP中文网

需在双击编辑前用dataset存oldVal，edit事件中读取dataset.oldValue和obj.value对比；监听表格容器dblclick并用e.target.closest('td[lay-edit]')定位单元格，存innerText.trim()至dataset，edit时直接取用，避免闭包或全局Map。

layui table 编辑后怎么监听失焦并拿到 oldVal 和 newVal

layui 的 table 表格本身不提供「编辑前后值对比」的原生钩子，edit 事件只在单元格内容变更后触发，且不携带旧值。必须自己存旧值、再比对。

核心思路：在单元格进入编辑状态（双击或回车）时，用 td 的 dataset 或临时对象缓存原始文本；失焦时读取当前输入框值，再比对。

监听 table.on('edit') 只能拿到新值和行数据，拿不到旧值 —— 这是最大误区
必须配合 table.render() 的 done 回调或 cell 事件，提前给可编辑单元格打标记
推荐用 td 元素的 dataset.oldValue 存旧值，避免污染全局变量

怎么在双击编辑前就存下 oldVal

不能等 edit 事件，得在用户真正开始编辑前拦截。Layui 没有「编辑开始」事件，但可以监听表格容器上的 dblclick，并判断是否点中了带 lay-edit 属性的 td。

给表格容器加 id="testTable"，然后绑定原生 dblclick 事件
用 e.target.closest('td[lay-edit]') 定位到被双击的单元格
立刻读取该 td 的 innerText（注意去除空格和换行），存入 td.dataset.oldValue
别用 textContent，它可能包含隐藏的或换行符，导致比对误判

document.getElementById('testTable').addEventListener('dblclick', function(e) {
  const td = e.target.closest('td[lay-edit]');
  if (td) {
    td.dataset.oldValue = td.innerText.trim();
  }
});

edit 事件里怎么安全取到 oldVal 和 newVal

table.on('edit') 触发时，td 已更新，但 dataset.oldValue 还在。只要前面存得对，这里就能比。

obj.value 是新值（已 trim 过）
obj.cell 是当前 td 元素，可读 dataset.oldValue
注意：如果用户没改内容直接失焦，obj.value === obj.cell.dataset.oldValue 成立，应跳过后续逻辑
别用 obj.oldValue —— Layui 根本没这个字段，是常见想当然错误

table.on('edit(test)', function(obj){
  const oldValue = obj.cell.dataset.oldValue || '';
  const newValue = obj.value;
  if (oldValue === newValue) return; // 未改动，不处理
  console.log('从', oldValue, '改成了', newValue);
});