编辑多列复选框/下拉框时如何保持editImage列图片永久显示？

我仔细看了你的问题描述，核心问题出在表格行在编辑不同列控件时会触发重绘，但你的图片渲染逻辑只绑定了特定列的编辑事件，其他列编辑时没有重新生成图片。咱们来用几个简单的步骤修复这个问题：

1. 把图片渲染逻辑抽成独立函数 #

首先，把添加timeGrad1图片的代码单独拎出来，这样不管哪列编辑，都能复用这个逻辑：

function refreshEditImage(row) {
  // 找到当前行的editImage单元格
  const imageCell = row.find('.editImage');
  // 清空原有内容（避免重复添加图片）
  imageCell.empty();
  // 插入timeGrad1图片
  imageCell.append('<img src="timeGrad1.png" alt="Time Gradient">');
}

2. 在所有控件的change事件里调用这个函数 #

不管是第三列、第六列的复选框，还是下拉菜单的编辑事件，在处理完你的业务逻辑后，都要调用上面的函数刷新当前行的图片：
比如第六列复选框的事件：

$(document).on('change', '#sixthColumnCheckbox', function() {
  // 这里保留你原来的业务处理代码
  // ...
  
  // 获取当前编辑的行
  const currentRow = $(this).closest('tr');
  // 刷新图片
  refreshEditImage(currentRow);
});

下拉菜单的事件同理，处理完逻辑后调用refreshEditImage($(this).closest('tr'))即可。

3. 初始化页面时也要渲染所有行的图片 #

页面加载完成后，遍历表格的所有行，调用这个函数初始化图片：

$(document).ready(function() {
  // 初始化所有行的editImage图片
  $('table tr').each(function() {
    refreshEditImage($(this));
  });
  
  // 其他初始化代码...
});

为什么这样能解决问题？ #

之前的代码只在特定列编辑时添加图片，但当编辑其他列时，表格行可能被重新渲染（比如部分表格插件会自动重绘行内容），这时候editImage列的内容会被重置，而你没有重新添加图片。通过把图片渲染逻辑抽成通用函数，并在所有编辑事件中调用，就能保证不管编辑哪列，图片都会被重新渲染出来，实现永久保留的效果。

如果还有问题，可以用console.log检查一下：

• 控件的change事件是否正常触发？
• currentRow是否正确获取到了当前编辑的行？
• imageCell是否能找到对应的单元格？

内容的提问来源于stack exchange，提问作者user9638369