定义动态表行颜色

Question

首先，请说这是我的HTML：

<table class='tg'>
    <tr>
        <th class='tg-031e'>Column #1</th>
        <th class='tg-031e'>Column #2</th>
        <th class='tg-031e'>Column #3</th>
    </tr>
    <tr>
        <td class='tg-031e'>Lorem Ipsum</td>
        <td class='tg-031e'>7</td>
        <td class='tg-031e'>Lorem Ipsum</td>
    </tr>
    <tr>
        <td class='tg-031e'>Lorem Ipsum</td>
        <td class='tg-031e'>12</td>
        <td class='tg-031e'>Lorem Ipsum</td>
    </tr>
    <tr>
        <td class='tg-031e'>Lorem Ipsum</td>
        <td class='tg-031e'>14</td>
        <td class='tg-031e'>Lorem Ipsum</td>
    </tr>
</table>

我想要实现的是为包含大于5的数字的行设置动态背景颜色的CSS规则。例如，假设最大限制为20.对于大于5的每个数字，颜色的不透明度应该是逐渐变得更高（可能通过SCSS使用lighten()和darken()）。这是一个快速的图形表示：

如上所示，我希望这适用于整个<tr>而不仅仅是<td>。这是迄今为止我所拥有的 a fiddle （渐渐没有颜色变浅或变暗）。

Answer 1

这是另一种方法：

var arr = document.getElementsByClassName('tg-031e');

var scale=0;
for(var i = 4; i < arr.length; i++){
    arr[i].style.backgroundColor = "rgba(0, 153, 0," + scale + ")";
    scale+=.05;
}

无需设置最大值。这将适用于任意数量的表行。在25行之后，所有行都具有相同/最暗的背景颜色。 （这也可以防止背景颜色遮挡文本。）

以下是 JSFiddle 的内容。

Answer 2

这是我能想到的最简单的方法：FIDDLE

$("tbody").find("tr").each(function() {
  var maxValue = 30;
  var sumCell = $(this).find('td.sum');
  var opacity = parseInt( sumCell.text() )/maxValue;
  if(sumCell.text() > 15) {
    sumCell.closest('tr').addClass('greenBg');
    sumCell.closest('tr').css('opacity',opacity);
  }
});

注意：根据您的要求设置maxValue。

希望这会有所帮助。 ：）