zoukankan      html  css  js  c++  java
  • cycle标签和random两种方式美化表格

    一:cycle标签实现给表格变色

    1. <style>标签里写好需要的颜色

    2. 在要变色的地方(/)加固定的语句,按照顺序依次执行

    代码:

    <!DOCTYPE html>
    {% load staticfiles %}
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
        img{
            20px;
            height: 20px;
        }
        .red{
            color:red;
        }
        .yellow{
            color: yellow;
        }
        .green{
            color:green;
        }
        </style>
    </head>
    <body>
            <table border="1px">
                    <tr>
                        <td>姓名</td>
                        <td>性别</td>
                        <td>年龄</td>
                        <td>手机号</td>
                        <td>爱好</td>
                        <td>图片</td>
                    </tr>
                    {% for i in user %}
                    <tr class="{% cycle 'red' 'yellow' 'green' %}">
                        <td>{{i.name}}</td>
                        <td>{{i.gender}}</td>
                        <td>{{i.age}}</td>
                        <td>{{i.mobile}}</td>
                        <td>{{i.hobby}}</td>
                        <td><img src="{% static i.pic_url %}"</td>
                    </tr>
                    {% endfor %}
                </table>

    </body>
    </html>

    二:用random过滤器随机变色

    1.<style>标签里写好需要的颜色

    2.在后端接口把颜色加入列表

    3.颜色列表名加random过滤器在定义颜色中随机变换,不可将列表直接写到random前面,否则会导致random无法正确识别而报错

    <!DOCTYPE html>
    {% load staticfiles %}
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
        img{
            20px;
            height: 20px;
        }
        .red{
            color:red;
        }
        .yellow{
            color: yellow;
        }
        .green{
            color:green;
        }
        </style>
    </head>
    <body>
            <table border="1px">
                    <tr>
                        <td>姓名</td>
                        <td>性别</td>
                        <td>年龄</td>
                        <td>手机号</td>
                        <td>爱好</td>
                        <td>图片</td>
                    </tr>
                    {% for i in user %}
                    <tr class="{{ change_color | random }}">
                        <td>{{i.name}}</td>
                        <td>{{i.gender}}</td>
                        <td>{{i.age}}</td>
                        <td>{{i.mobile}}</td>
                        <td>{{i.hobby}}</td>
                        <td><img src="{% static i.pic_url %}"></td>
                    </tr>
                    {% endfor %}
                </table>

    </body>
    </html>
    
    
    1 def red(request):
    2     user = models.User.objects.all()
    3     change_color = ['red','yellow','green']
    4     return render(request,'helloapp/red.html',locals())
  • 相关阅读:
    《Geometric Deep Learning综述介绍》
    《和想象不太一样的'Graph Neural Network + Zero Shot'》
    《几何深度学习前沿》
    《【Paper Live】滴滴出行-探索资源约束的Contextual Bandits问题 & KDD Cup滴滴出行比赛解读>
    《PDP: 解决约束满足问题的神经网络架构 | 刘晶 | 集智俱乐部图网络论文读书会20190819》
    《NeuroSAT: Learning a SAT Solver from Single-Bit Supervision》
    《OR Talk NO.5 | Facebook 田渊栋:用深度(强化)学习为组合优化寻找更好的启发式搜索策略》
    《OR Talk NO.15 | 在业界实验室做AI设计师是一种什么体验?》
    超级跳马 —— 矩阵快速幂优化DP
    图SLAM:Noob的同时本地化和映射指南
  • 原文地址:https://www.cnblogs.com/lutt/p/10651731.html
Copyright © 2011-2022 走看看