jQuery替换元素：Datatable中点击切换图标类的实现方法

嘿，我来帮你搞定这个图标切换的需求！根据你的描述，我们需要实现点击表格单元格后，切换<i>元素的图标类（fa-plus/fa-minus）和操作类（addItem/removeItem），同时保持id不变。这里有两种方案，推荐第一种更直观高效的：

方案一：直接操作DOM元素（推荐） #

这种方式不需要处理HTML字符串，直接操作页面上的图标元素，同时同步更新Datatable的数据源，确保数据一致性：

$('.data-table').on('click', 'td', function () {
  // 获取当前点击单元格内的图标元素
  const $icon = $(this).find('i');
  const itemId = $icon.attr('id');
  
  // 判断当前图标状态，执行切换
  if ($icon.hasClass('fa-plus')) {
    // 从加号+addItem切换到减号+removeItem
    $icon.removeClass('fa-plus addItem').addClass('fa-minus removeItem');
  } else {
    // 从减号+removeItem切换到加号+addItem
    $icon.removeClass('fa-minus removeItem').addClass('fa-plus addItem');
  }
  
  // 同步更新Datatable的数据源，避免后续获取旧数据
  const table = $('.data-table').DataTable();
  const row = table.row(this);
  const rowData = row.data();
  
  // 重新生成更新后的HTML字符串并赋值
  rowData.action = `<i id="${itemId}" class="fas ${$icon.attr('class')}"></i>`;
  
  // 更新行数据，draw(false)保证不打乱当前分页/排序状态
  row.data(rowData).draw(false);
});

方案二：处理HTML字符串（适合必须基于row.data()操作的场景） #

如果你需要基于row.action的HTML字符串来处理，可以用DOMParser把字符串转成DOM元素操作，再转回字符串更新：

$('.data-table').on('click', 'td', function () {
  const table = $('.data-table').DataTable();
  const row = table.row(this);
  let rowData = row.data();
  let actionHtml = rowData.action;
  
  // 将HTML字符串解析为DOM元素
  const parser = new DOMParser();
  const doc = parser.parseFromString(actionHtml, 'text/html');
  const iconEl = doc.querySelector('i');
  
  // 切换图标和操作类
  if (iconEl.classList.contains('fa-plus')) {
    iconEl.classList.remove('fa-plus', 'addItem');
    iconEl.classList.add('fa-minus', 'removeItem');
  } else {
    iconEl.classList.remove('fa-minus', 'removeItem');
    iconEl.classList.add('fa-plus', 'addItem');
  }
  
  // 将更新后的DOM元素转回字符串
  rowData.action = iconEl.outerHTML;
  
  // 更新行数据并刷新表格
  row.data(rowData).draw(false);
  
  // 即时更新页面上的元素（避免draw(false)可能的延迟）
  $(this).html(rowData.action);
});

注意事项 #

• 确保table变量是Datatable的正确实例，避免重复初始化（可以把const table = $('.data-table').DataTable();放在事件监听外，作为全局变量）。
• draw(false)参数很重要，它会在不重新排序、分页的情况下更新表格，保持用户当前的浏览位置。

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