根据单元格的值有条件地突出显示 html table 中的单元格

Question

我的htmltable的数据来自这个列表：

mylist=
[{'StartDate': '2021-10-02', 'ID': 11773, 'Name': Mike, 'Days':66 },
{'StartDate': '2021-10-03', 'ID': 15673, 'Name': Jane, 'Days':65}, 
{'StartDate': '2021-10-03', 'ID': 95453, 'Name': Jane, 'Days':65}, 
{'StartDate': '2021-10-03', 'ID': 15673, 'Name': Mike, 'Days':65}, 
... 
{'StartDate': '2021-10-5', 'ID': 34653, 'Name': Jack, 'Days':63}]

我的 HTML table 在我的 HTML 文件中是：

<table class="table table-striped" id="dataTable" width="100%" cellspacing="0">
                                    
     <thead>
        <tr>
            <th>StartDate</th>
            <th>ID</th>
            <th>Name</th>
            <th>Days</th>
        
     </thead>
     <body>

{% for element in mylist %}

      <tr>
        <td>{{ element.StartDate}}</td>
        <td>{{ element.ID }}</td>
        <td>{{ element.Receiver }}</td>
        <td>{{ element.Days }}</td>

       </tr>
      {% endfor %}      
       </tbody>
                         
      </table>

我想把大于14天的颜色设置成红色。我想设置包含红色“Mike”和蓝色“Jane”的单元格。

请指教我该怎么做

Answer 1

Django 有 if 个可用于此的语句模板标签。

例如，对于您的日期部分，您可以在模板中编写这样的 <td> 元素：

<td {% if element.Days > 14 %} class="red_class"{% endif %}>{{ element.Days }}</td>

然后您将定义一个名为 red_class 的 css class 并将该元素的背景颜色属性设置为红色。

名称部分类似：

<td 
   {% if element.Receiver == "Mike" %} 
      class="red_class"
   {% elif element.Receiver == 'Jane' %}
      class="blue_class"
   {% endif %} > {{ element.Receiver }}</td>

根据单元格的值有条件地突出显示 html table 中的单元格

Conditionally highlight cells in a html table based on the cells' value

html

python

django

datatable

list