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提供颜色。

＆＃13;

$(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');
      }
    })
})

＆＃13;

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

＆＃13;

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

＆＃13;

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

您可以执行以下操作：

＆＃13;

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

＆＃13;

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

＆＃13;

它不能做负值，但它确实以正确的颜色显示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)]
    }
  });

的 DEMO

Answer 5

试试这个......

这会创建一个真正的绿色到红色skala ......

（当然你可以稍微调整一下这些值，以便它更适合你的需要..）=）

$("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/

根据数值范围更改CSS样式

6 个答案: