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())
  • 相关阅读:
    OC面向对象—封装
    设计模式之类关系
    理性:中国别一厢情愿救俄罗斯(转)
    Mockito--完整功能介绍(转)
    从陌陌上市看BAT的移动保卫战(转)
    This exception may occur if matchers are combined with raw values
    RepositoryClassLoader.java
    搭建你的持续集成server
    mysql中怎样查看和删除唯一索引
    Android中Context具体解释 ---- 你所不知道的Context
  • 原文地址:https://www.cnblogs.com/lutt/p/10651731.html
Copyright © 2011-2022 走看看