Question

我需要在td中替换背景颜色属性，只要它与需要替换的颜色匹配

<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>

我们说我需要用#cE00Ef替换td中的#FF0000。我怎么能用jQUERY做到这一点

小提琴http://codepen.io/anon/pen/NdPdwO

更新：我使用了来自sinisnake的脚本，但是我的实际页面有年历＆amp;当我运行这个脚本时，我的事件将它包装在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

您可以使用jquery .css（）遍历td并获取颜色，这将为每个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>

Answer 2

如果你想选择bg颜色＃ffff00的元素，你可以$("[style*='background-color:#ffff00']")给出bg颜色设置为＃ffff00

的元素列表

function replaceColor(colorToBeReplaced, newColor) {
  var $elements = $("[style*='background-color:"+colorToBeReplaced+"']");        
  $elements.css("background-color",newColor);
};

$(document).ready(function() {

  //replaceColor("#001122","#E6E6E6");
  replaceColor("#001122","transparent"); //in case to remove the bg as OP suggested  

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<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:#CCCCC;">27</td>
    <td style="background-color:#001122;">28</td>
    <tr>
</table>

将颜色替换为另一种颜色，仅在TD中匹配

2 个答案: