根據數值范圍更改CSS樣式

Question

我有一個溫度表，我想根據其內容更改每個<td>的背景顏色。 例如：

<tr class="temp-box">
    <td scope="row" class="temp-title">Máx(ºC)</td>
    <td>19</td>
    <td>19</td>
    <td>22</td>
    <td>27</td>
    <td>31</td>
    <td>32</td>
    <td>32</td>
    <td>32</td>
    <td>31</td>
    <td>28</td>
    <td>24</td>
    <td>22</td>
</tr>

我想要一個javascript / jquery函數來檢查每個<td>內容，例如，如果它是從10到15的數值，則將background-color更改為藍色，如果是從20到30，則更改為紅色，並且等等...

有什么想法嗎？ 謝謝！

Answer 1

將類添加到td並使用CSS賦予顏色。

 $(document).ready(function(){ $('td').each(function() { var text = parseInt($(this).text()); if (10 < text && text <= 20) { $(this).addClass('red'); } else if (20 < text && text <= 35) { $(this).addClass('blue'); } }) }) 

 .red { background-color: red; } .blue { background-color: blue; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <table> <tr class="temp-box"> <td scope="row" class="temp-title">Máx(ºC)</td> <td>19</td> <td>19</td> <td>22</td> <td>27</td> <td>31</td> <td>32</td> <td>32</td> <td>32</td> <td>31</td> <td>28</td> <td>24</td> <td>22</td> </tr> </table> 

Answer 2

// Function returns a color based on whatever logic you want
function findColor(value) {
  var colorMap = [
    { color: "#0000ff", min: 10, max: 15 },
    { color: "#0000ff", min: 20, max: 30 }
  ];
  var result = colorMap.filter(function(item) {
    return item.min <= value && item.max >= value;
  });
  if (result.length > 0) {
    return result[0].color;
  }
  return "transparent";
}

$(".temp-box td").each(function() {

  // read numeric value
  var value = parseInt(element.text(),10);
  element.css("background-color", findColor(value));
});

Answer 3

您可以執行以下操作：

 $('td').each(function(){ var red = Math.round($(this).text() / 100 * 255); var blue = 255 - red; $(this).css('background', 'rgb(' + red + ', 0, ' + blue + ')'); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <table> <tr> <td>25</td> <td>100</td> <td>10</td> <td>34</td> <td>88</td> <td>70</td> <td>20</td> </tr> </table> 

它不能做負值，但可以用正確的顏色顯示0到100度之間的任何值，並且可以調整。

Answer 4

將addClass(function)與基於單元格值和類的哈希圖的邏輯結合使用

 var classes = {
    1: 'red',
    2: 'blue',
    3: 'green'
  }

  $('td').addClass(function() {
    var value = +$(this).text();
    if (!isNaN(value)) {
      return classes[Math.floor(value / 10)]
    }
  });

演示

Answer 5

嘗試這個...

這創建了一個真正的綠色到紅色的斯卡拉...

（當然，您可以對值進行一些調整，以使其更符合您的需求。）=）

 $("tr.temp-box td:not(.temp-title)").each(function(){ var r = parseInt((255 * $(this).text()) / 100); var g = parseInt((255 * (100 - $(this).text())) / 100); var b = 0; var bgColor="rgb("+r+","+g+","+b+")"; console.log(bgColor); $(this).css("background-color",bgColor); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <table> <tr class="temp-box"> <td scope="row" class="temp-title">Máx(ºC)</td> <td>19</td> <td>19</td> <td>22</td> <td>27</td> <td>50</td> <td>60</td> <td>50</td> <td>32</td> <td>31</td> <td>28</td> <td>24</td> <td>22</td> </tr> </table> 

Answer 6

這里有更多顏色選項供您選擇...您可以選擇要使用的顏色選項以及適用的溫度范圍...

的HTML：

<table id="mytable">
    <tr class="temp-box">
    <td scope="row" class="temp-title">Máx(ºC)</td>
    <td>19</td>
    <td>19</td>
    <td>22</td>
    <td>27</td>
    <td>31</td>
    <td>32</td>
    <td>32</td>
    <td>32</td>
    <td>31</td>
    <td>28</td>
    <td>24</td>
    <td>22</td>
</tr>
</table>

jQuery：

$('#mytable td').each(function(){
    var currentValue = $(this).html();
    if(currentValue <= 20){$(this).css("background-color", "lightblue");}
    if(currentValue >= 21 && currentValue <= 24){
        $(this).css("background-color", "lightgreen");}
    if(currentValue >= 25 && currentValue <= 28){
        $(this).css("background-color", "yellow");}
    if(currentValue >= 29 && currentValue <= 31){
        $(this).css("background-color", "orange");}
    if(currentValue >= 32){
        $(this).css("background-color", "red");}
});

在這里工作的小提琴： http : //jsfiddle.net/oquczbtk/