定义动态表格行颜色答案

【问题标题】：Defining dynamic table row color定义动态表格行颜色
【发布时间】：2014-12-14 19:42:02
【问题描述】：

首先，说这是我的 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 的数字，颜色的不透明度应该逐渐变高（可能通过使用lighten() 和darken() 的SCSS）。这是一个快速的图形表示：

如上所示，我希望它适用于整个<tr> 而不仅仅是单个<td>。这是我目前所拥有的a fiddle（颜色没有逐渐变亮或变暗）。

【问题讨论】：

CSS 无法检测内容...您需要 Javascript。
@Paulie_D：因此jquery，我想。
是的，那么我们将不胜感激您在自我解决方面付出的努力......但问题要求 CSS 规则

标签： jquery html css sass

【解决方案1】：

这是我能想到的最简单的方法：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。

希望这会有所帮助。 :)

【讨论】：

这正是我想要的。谢谢你的时间:)

【解决方案2】：

这是另一种方法：

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 上的样子。

【讨论】：

太棒了！更好的一个。