如何用jQuery实现按钮切换功能以来回更改表格单元格样式？

看起来你现在的问题是按钮只能单向设置样式，没法切换回去对吧？其实不用额外加按钮，只要在点击事件里判断单元格当前的状态，然后做切换操作就行，而且用CSS类来管理样式会比直接写行内样式更灵活易维护。

第一步：先定义切换用的CSS类 #

把要切换的样式封装成类，后续通过添加/移除类来实现状态切换：

.table__cell--highlight {
  text-decoration: underline;
  /* 后续通过JS把data-colour的值绑定到这个变量上 */
  background-color: var(--cell-bg-colour);
}

第二步：修改JS逻辑，实现切换功能 #

替换你现有的JS代码，通过判断类的存在来决定是应用样式还是恢复原样：

$('.table__button').click(function() {
  // 直接过滤出非disabled的单元格，不用手动循环判断
  $('table.table td:not(.table__cell--disabled)').each(function() {
    const $cell = $(this);
    // 判断当前单元格是否处于高亮状态
    if ($cell.hasClass('table__cell--highlight')) {
      // 已高亮：移除类，恢复默认样式
      $cell.removeClass('table__cell--highlight');
    } else {
      // 未高亮：添加类，同时把data-colour的值设为背景色变量
      $cell.css('--cell-bg-colour', $cell.attr('data-colour')).addClass('table__cell--highlight');
    }
  });
});

为什么原有代码无法实现切换？ #

你原来的代码每次点击都会直接给单元格设置背景和下划线样式，没有判断当前单元格是不是已经被设置过了。第二次点击时还是重复执行设置操作，自然无法回退到初始状态。通过判断类的存在，我们就能明确当前该执行“应用样式”还是“恢复原样”的逻辑。

额外优化小提示 #

如果不想用CSS变量，也可以直接在JS里操作行内样式，但用类管理的好处是：后续要修改样式效果时，只需要调整CSS代码，不用改动JS，维护成本更低。

内容的提问来源于stack exchange，提问作者A.C