如何根据值的数量更改值的颜色？答案

【问题标题】：How can I change the color of the value base on the amount of the value?如何根据值的数量更改值的颜色？
【发布时间】：2017-11-16 04:30:29
【问题描述】：

我有这个 HTML 表格和 JS

var example = document.getElementid('*Numerical Value*');
var exampledbref = firebase.database().ref().child('example').child('value');
exampledbref.on('value'
  snap => expample.innerText = snap.val());

<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Untitled Document</title>
</head>

<body>
  <table width="200" border="1">
    <tbody>
      <tr>
        <td>String</td>
        <td>String</td>
      </tr>
      <tr>
        <td>*Numerical Value*</td>
        <td>*Numerical Value*</td>
      </tr>
      <tr> </tr>
    </tbody>
  </table>
</body>

</html>

这个模型有效，它需要做的是从 firebase 获取并显示表上的数据。

我的问题，如何根据从 firebase 获取的值的数量更改值的颜色？

例如，我正在考虑一个参数，如果值小于5，则值本身的颜色会变为红色。现在如果大于5，则值的颜色为green。

如果正在获取的数据的值为4，它如何改变以使该值显示在red中，并且如果它大于5，则该值的颜色变为green？我怎样才能做到这一点？

【问题讨论】：

您的代码无效，作为程序员，在转发之前检查代码是一个好习惯。
真实代码有敏感信息。我只需要一些“虚拟”示例的参考。它并不意味着被认真对待。
无论您需要什么作为您正在使用的参考资料都应该是有效的。

标签： javascript jquery html firebase firebase-realtime-database

【解决方案1】：

检查值的 jQuery 解决方案是

jQuery

// for each <td>
$('td').each(function(){
   // get the text value in each <td>
   var val = $(this).text();
   // convert to int
   var int = parseInt(val);
   // if more than 5
   if(int > 5) {
      $(this).css({'background': 'green'});
   }else {
       $(this).css({'background': 'red'});
   }
});

一个简单的小提琴 - https://fiddle.jshell.net/Jim_Miraidev/akcgabug/

【讨论】：