如何移除JS Datatables中自定义样式后仍存在的条纹效果

嘿，我懂你的困扰——明明已经设置了stripeClasses: []，但Datatables的条纹样式还是盖过了你自定义的单元格背景色。这大概率是因为Datatables默认会给奇偶行加上odd和even的CSS类，这些类的样式优先级比你直接设置的单元格style更高。给你几个实用的解决办法：

• 彻底清除默认的奇偶行类
  Datatables在渲染表格时，会自动给<tbody>里的行添加odd或even类来实现条纹效果。你可以在drawCallback里直接移除这些类，让自定义样式完全生效：

  drawCallback: function (settings) {
      applyConditionalFormatting(this.api());
      // 移除默认的奇偶行类，彻底消除条纹样式
      $('#driverTable tbody tr').removeClass('odd even');
  },
  

• 提高自定义样式的CSS优先级
  如果你不想改动JS逻辑，也可以通过强化CSS选择器的优先级来覆盖默认条纹样式。比如给你的自定义背景色样式加上更具体的选择器：

  #driverTable tbody tr td {
      background-color: inherit !important;
  }
  #driverTable tbody tr td.custom-cell-color {
      background-color: hsl(var(--hue), 100%, 75%) !important;
  }
  

  然后在applyConditionalFormatting函数里，给目标单元格添加custom-cell-color类，代替直接设置style属性：

  $(cell).addClass('custom-cell-color').css('--hue', hue);
  

• 检查表格是否自带条纹类
  如果你用了Bootstrap或者Datatables的集成样式，可能给<table>标签加了table-striped类，这个类也会生成条纹效果。直接从表格标签里移除这个类就行：

  <!-- 移除table-striped类 -->
  <table id="driverTable" class="display">...</table>
  

另外提个小细节：你代码里的values.length好像有点问题——变量values没定义，应该是把data转成数值数组吧？比如var values = data.map(val => parseFloat(val)).filter(val => !isNaN(val));，不然min和max的计算会出错哦。

备注：内容来源于stack exchange，提问作者Rockets24