jquery - 将颜色替换为另一种颜色以仅在 TD 中匹配

Question

只有当td中的background-color属性与需要替换的颜色匹配时，我才需要替换它

<td style="background-color:#AEE0EC;">24</td>
<td style="background-color:#cE00Ef;">25</td>
<td style="background-color:#EEAABB;">26</td>
<td style="background-color:#CCCCC;">27</td>
<td style="background-color:#001122;">28</td>

假设我只需将 td 中的 #cE00Ef 替换为 #FF0000。我怎样才能用 jQUERY 做到这一点

fiddle http://codepen.io/anon/pen/NdPdwO

更新:我使用了 sinisnake 中的脚本，它可以在 fiddle 中工作，但我的实际页面有年份日历，当我运行这个脚本时，它不起作用，我事件将它包裹在 setTimeout 函数中，以确保是否可以在完整页面下载之前运行。

我怎样才能让它工作，以便可以删除 3 月 24 日 td 背景颜色或用白色背景替换。不知道为什么下面的脚本不起作用

setTimeout(function(){ 
    $('td').each(function() {
    if($(this).attr('style').split(':')[1]==="#AEE0EC;") {
        $(this).css('background-color','#ffffff;');
    }
    });
}, 5000);

https://jsfiddle.net/acsd5Lke/1/

Answer 1

您可以迭代 td 并使用 jquery .css() 获取颜色，这将为您提供每种 vackground 颜色的 RGB 值。然后，您可以将该 rgb 值传递给函数以将其转换为十六进制值 - 请注意，我使用 @Erick Petrucelli 之前的 SO 答案来实现此转换函数。然后可以将其与目标值进行比较，并通过设置 .css() 背景颜色进行交换。

这是一个快速答案，并将值设置为小写。我建议使其更加健壮，并明确地将值设置为小写或大写，但它可以完成工作。

$(document).ready(function(){
  $('#tableTest td').each(function(){
    var originalColor= "#ce00ef";
    var replacementColor = "#ff0000";
    var tdColor = $(this).css('background-color');
    var convertedColor = convertColor(tdColor);
    if(convertedColor.trim() == originalColor){$(this).css('background-color', replacementColor)};
    
   })
  
  function convertColor(tdColor){
    var rgb = tdColor.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
      function hex(x) {
        return ("0" + parseInt(x).toString(16)).slice(-2);
      }
    return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
    }
  })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Original Table - check td with 25 in it</p>
<table id="table">
  <tr>
    <td style="background-color:#aee0ec;">24</td>
    <td style="background-color:#ce00ef;">25</td>
    <td style="background-color:#eeaabb;">26</td>
    <td style="background-color:#cccccc;">27</td>
    <td style="background-color:#001122;">28</td>
  </tr>
  </table>

<br/>
<p>Modified Table - check td with 25 in it</p>

<table id="tableTest">
  <tr>
    <td style="background-color:#aee0ec;">24</td>
    <td style="background-color:#ce00ef;">25</td>
    <td style="background-color:#eeaabb;">26</td>
    <td style="background-color:#cccccc;">27</td>
    <td style="background-color:#001122;">28</td>
  </tr>
  </table>