时间戳

首页 > 解决方案 > 更改表格中特定数据的 CSS 颜色

python - 更改表格中特定数据的 CSS 颜色

问题描述

我想更改 HTML 数据表中值的特定颜色，但我不知道该怎么做。我想更改表格单元格的数据颜色。

例如，

if (cell.value >= 10){

   cell.color = red
}

我有一个数据框，我发回它以在我的文件 (.html) 中填充这样的表格。

<!doctype html>
<title>Table SUA</title>
<link rel=stylesheet type=text/css href="{{ url_for('static', filename='style.css') }}">

<div class=page>

  <h1>Table of fixed bugs according to version for OS{{titre}}</h1>
  {% for table in tables %}
    <h2>{{titles[loop.index]}}</h2>
    {{ table|safe }}
  {% endfor %}
</div>

谢谢您的帮助。

标签： pythonhtmlcss

解决方案

使用该class属性来“定位”数据（class可以在包含数据的div或span或中）。td我会先查看数据，然后再将其发送到表并设置，例如，class="tenPlus"对于每条数据，>= 10您可以将此数据存储在单独的列表或字典中，并在将数据发送到桌子。然后您可以轻松地使用 Javascript 来更改元素的颜色。这是一个非常简单的例子：

var tenPlus, nineDown;

tenPlus = document.getElementsByClassName('tenPlus');
nineDown = document.getElementsByClassName('nineDown');

for (var i = 0; i < tenPlus.length; i++) {
  tenPlus[i].style.background = "red";
}

for (var i = 0; i < nineDown.length; i++) {
  nineDown[i].style.background = "blue";
}
<table>
  <tr>
    <td class="tenPlus">12</td>
    <td class="nineDown">7</td>
    <td class="tenPlus">10</td>
  </tr>
  <tr>
    <td class="tenPlus">22</td>
    <td class="tenPlus">33</td>
    <td class="nineDown">0</td>
  </tr>
  <tr>
    <td class="nineDown">2</td>
    <td class="nineDown">8</td>
    <td class="nineDown">1</td>
  </tr>
</table>

推荐阅读