在 HTML 表格中以相同颜色更改具有相同单元格值的行 - Django 项目答案

【问题标题】：Change the rows with the same cell value in the same color in HTML table - Django project在 HTML 表格中以相同颜色更改具有相同单元格值的行 - Django 项目
【发布时间】：2022-02-05 04:28:20
【问题描述】：

我在我的 Django 项目的 html 文件中创建了一个表，原始数据基于以下列表（这是一个很长的列表，所以我只列出了几行）：

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

我的 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>

我想让所有具有相同 ID 值的行颜色相同。请告知我应该在<td>{{ element.ID }}</td> 中添加什么。谢谢！

我的部分观点.py：

client = gspread.service_account_from_dict(creds)


def CreateSheet(Return_record):
    sheet = client.open(Return_record).sheet1
    return sheet

from sheet2api import Sheet2APIClient


sheet = client.open('Return Record 2022')
sheet_instance = sheet.get_worksheet(0)
mylist = sheet_instance.get_all_records()
mylist


def table2022(request):
    return render(request,'table2022.html',{'mylist':mylist})

【问题讨论】：

您想为每个独特的ID 单元格设置独特的颜色吗？如果ID有很多，颜色就会很多。
感谢您的评论！唯一的颜色会更好，但是如果某些ID共享相同的颜色就可以了，因为我只是希望我的表格清晰。是否可以设置颜色列表，他们会在该列表中选择颜色？ “mylist”是我的谷歌表格中的动态数据
或者我可以把所有以 1 结尾的 ID 变成红色，2 变成绿色……但我也不知道该怎么做。
10 种颜色是更合理的想法。在这种情况下，您能否分享您有问题的views.py？
感谢您回复我。我已经在问题中添加了我的 views.py

标签： html django list dataframe datatable

【解决方案1】：

我们想要作为上下文传递的所有内容，我们都应该保留在我们想要使用它的view 中。当我们有越来越多的代码时，它更具可读性。

我们要做的是为数字 0-9 定义一种颜色。我先挑一些灯colors，你可以随意更改。

views.py：

def table2022(request):
    mylist = sheet_instance.get_all_records()
    colors = {'0': 'aqua', '1': 'beige', '2': 'burlywood', '3': 'lightgrey', '4': 'silver', '5': 'skyblue', '6': 'lightblue', '7': 'lightpink', '8': 'lightgreen', '9': 'lawngreen'}
    context = {'mylist': mylist, 'colors': colors}

    return render(request, 'table2022.html', context)

现在，因为在模板中使用Python 并不是那么简单，我们需要创建自定义Template Tag。让我们从在您的应用程序中创建文件夹开始，我们将其命名为 custom_tags.py。它应该在YourProject/your_app/templatetags/ 文件夹中创建，所以我们还必须在其中创建templatetags 文件夹。

custom_tags.py：

from django import template

register = template.Library()

@register.filter(name='get_color')
def get_color(colors, number):
    return colors[str(number)[-1]]

你的模板.html：

{% load custom_tags %}

...

{% for element in mylist %}
    <tr>
        <td>{{ element.StartDate }}</td>
        <td style="background-color: {{ colors|get_color:element.ID }}">
            {{ element.ID }}
        </td>
        <td>{{ element.Receiver }}</td>
        <td>{{ element.Days }}</td>
    </tr>
{% endfor %}

get_color 标签基本上是整个ID，然后只提取最后一个数字并使其成为一个字符串。之后，它使用单个数字作为 colors 字典中的键，并将相应的值传递给模板，它将成为有效的 html 颜色。

自定义标签用于将一些 Pythonic 代码直接“实现”到模板中。不要过度使用它，因为大多数编码应该在标准文件中，如views.py 和models.py。但有时没有更好的方法。 :)

有关Tags的更多详细信息，请查看Django's DOCS

【讨论】：

我在创建后几分钟编辑了帖子。请再次检查custom_tags.py 文件:)
有效！！非常感谢！
享受吧！保持创意，custom_tags 将帮助您:)
你需要稍微修改结果为return colors[str(number)[-2:]]
@MaryMa - 它确实是作为列表索引的基本字符串。阅读它，即在这里：railsware.com/blog/…