根据单元格内的值设置单元格的背景颜色答案

【问题标题】：Set background colors of cells based on the value inside cell根据单元格内的值设置单元格的背景颜色
【发布时间】：2014-03-04 18:37:28
【问题描述】：

我有一个填充了随机数的表格，我需要根据单元格中的数字为每个单元格的背景设置一个颜色为 rgba 颜色。现在这些数字在刷新时会发生变化，因此如果数字值发生变化，颜色应该会发生变化。我该怎么办？谢谢！

HTML

<table class="table table-bordered">
<tbody>
    <tr>
        <td>636407029</td>
        <td>612541294</td>
        <td>870806031</td>
    </tr><tr>
        <td>110235053</td>
        <td>924102758</td>
        <td>221478283</td>
    </tr><tr>
        <td>572041102</td>
        <td>236316470</td>
        <td>781401130</td>
    </tr>
</tbody>
</table>

【问题讨论】：

如何将636407029 转换为RGBA？

标签： jquery html css dynamic-tables

【解决方案1】：

这样试试

$(".table-bordered td").each(function(){
$(this).attr("bgcolor",$(this).html());
});

fiddle

html

<table>
<tbody>
<tr>
    <td bgcolor="636407029">636407029</td>
    <td>612541294</td>
    <td>870806031</td>
</tr><tr>
    <td>110235053</td>
    <td>924102758</td>
    <td>221478283</td>
</tr><tr>
    <td>572041102</td>
    <td>236316470</td>
    <td>781401130</td>
</tr>
</tbody>
 </table>

【讨论】：

@AnnoopJoshi 我尝试了类似的方法，但没有奏效，我以为是我。我看到它在您的小提琴中有效，但不适用于我的代码：/
您的 html 中没有表格标签。给后试试
让我更新上面的 HTML，因为我确实有 table 标签，对此感到抱歉。
@urbanrunic 我怀疑，它可能会被其他风格取代
谢谢！我想到了。它被覆盖了，我不得不修复样式。谢谢！

【解决方案2】：

这应该有效 - 如果您编写 transformNumberToColour 函数。

$("td").each(function(){
    $element = $(this);
    val = Number($element.html());
    rgbColour = transformNumberToColour(val); // not shure how you want to do this
    $element.css('background-color', rgbColour);
});

【讨论】：

【解决方案3】：

您必须执行以下操作：

$("td").each(function () {
    var new_color = make_color_from_content($(this).text());
    $(this).css("background-color", new_color);
});

当然，您必须编写一些函数 (make_color_from_content) 将值从“636407029”（例如）转换为“rgba(xxx,xxx,xxx,x)”。

【讨论】：