主页 / 问题 / 1051301
Accepted
UnitDen
Asked:2020-11-27 19:53:42 +0000 UTC2020-11-27 19:53:42 +0000 UTC

更改表格中的单元格颜色

  • 772

有一个表格，需要设置列中单元格的颜色，使颜色根据单元格中的值而变化。以热图为例！颜色范围：minColor: '#f9f9f9' 到 maxColor: '#98c76b'

在此处输入图像描述

css

2 个回答

  1. Best Answer

    至于我，只需根据值将颜色的 alpha 通道从 0 更改为 1。

    $("td").each(function(){     
   let a = +$(this).text()/100;     
   $(this).css('background-color', `rgba(152, 199, 108, ${a})`);
});
    td {
  border:1px solid black;
  padding: 4px 12px;
  font-weight: bold;
}
tr {
  background-color: white;
}
tr:nth-child(2n+1){
  background-color: #f0f0f0;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table cellspacing="0" cellpadding="0">
  <tr><td>10</td><td>100</td></tr>
  <tr><td>25</td><td>0</td></tr>
  <tr><td>50</td><td>0</td></tr>
</table>

    • 3

  2. 对于初学者，我会从 RGB 颜色模型转移到 HSL。然后，一劳永逸地设置色调和饱和度，我将在 minColor 和 maxColor 变量中输入亮度值，从最大（亮）到最小（暗）。是的，正是这样 minColor 对应于最小值。

    然后我会为每一列定义条件。您想要在 Excel 中使用条件格式完成并要求您设置条件。例如，是否应该在每一列中都有一个最大值最暗的单元格？或者 IN ALL 具有相同类型值的列，您需要找出最小值和最大值？或者单元格的颜色取决于单元格中的阈值（例如，超过 75% - 暗，即使在 100500% 的值下也不会变得更暗）。

    那么，这很简单。我们将单元格中的值范围（考虑到所有限制，如果有的话）划分为从 minColor 中减去 maxColor 时得到的 % 部分，并使用脚本遍历单元格，进行亮度计算并代入生成 HSL/HSLA 格式的颜色属性。

    例如，您有： 

    в одной ячейке значение 5 (и это минимум. переменная Min), 
в другой 30, 
в третьей 125 (и это максимум, переменная Max), 
цвет должен становиться светлее/темнее равномерно,
minColor = 100%,
maxColor = 70%

    然后每个单元格中的脚本将执行以下操作：

    %SomeVariable% = cell.value / (Max - Min) * 100; // узнаем, какой % значение ячейки составляет от диапазона
%SomeVariable% = %SomeVariable% * (minColor - maxColor) / 100; // узнаем, какой % этот процент составляет от предусмотренного диапазона яркостей
%someOtherVariable% = minColor - %SomeVariable%; //вычитаем этот % из максимума яркости, т.к. нам надо чем больше значение, тем МЕНЬШЕ L.
cell.style.backgroundColor = "HSLA(0,100%," + %someOtherVariable% + "%, 1)"; // задаем цвет.
    • 1

相关问题