一：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{

        width: 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{
        width: 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>






 def red(request):

     user = models.User.objects.all()

     change_color = ['red','yellow','green']

     return render(request,'helloapp/red.html',locals())


												


											
cycle标签和random两种方式美化表格的更多相关文章
	

    
								
  1. C# 如何通过mailto标签和SMTP协议两种方式发送邮件
		
    本文主要讲解如何通过如现mailto标签和SMTP协议两种方式发送邮件,下面就直入主题 方法一.通过mailto标签发送邮件 通过mailto不是正真意义上的发送邮件,它只是会自动调用我们本地默认的邮 ...
    
		
    2. 
						
  2. Javascript绑定事件的两种方式的区别
		
    命名函数 <input type="button" onclick="check()" id="btn"/> <scrip ...
    
		
    3. 
						
  3. 在基于MVC的Web项目中使用Web API和直接连接两种方式混合式接入
		
    在我之前介绍的混合式开发框架中,其界面是基于Winform的实现方式,后台使用Web API.WCF服务以及直接连接数据库的几种方式混合式接入,在Web项目中我们也可以采用这种方式实现混合式的接入方式 ...
    
		
    4. 
						
  4. placeholder实现的两种方式
		
    /** * PlaceHolder组件 * $(input).placeholder({ * word: // @string 提示文本 * color: // @string 文本颜色 * evtT ...
    
		
    5. 
						
  5. java中实现同步的两种方式:syschronized和lock的区别和联系
		
    Lock是java.util.concurrent.locks包下的接口,Lock 实现提供了比使用synchronized 方法和语句可获得的更广泛的锁定操作,它能以更优雅的方式处理线程同步问题,我 ...
    
		
    6. 
						
  6. spring配置属性的两种方式
		
    spring配置属性有两种方式,第一种方式通过context命名空间中的property-placeholder标签 <context:property-placeholder location ...
    
		
    7. 
						
  7. Code First02---CodeFirst配置实体与数据库映射的两种方式
		
    Code First有两种配置数据库映射的方式,一种是使用数据属性DataAnnotation,另一种是Fluent API. 这两种方式分别是什么呢?下面进行一一解释: DataAnnotation ...
    
		
    8. 
						
  8. 将html页改成jsp的两种方式
		
    将html页改成jsp的两种方式 作者: 字体:[增加 减小] 类型:转载 时间:2013-08-13 将html页改成jsp有两种方法,第一种是直接修改html文件,另一种是新建jsp文件.下面为大 ...
    
		
    9. 
						
  9. Android Studio签名打包的两种方式
		
    签名打包的两种方式: 注:给我们自己开发的app签名,就代表着我自己的版权,以后要进行升级,也必须要使用相同的签名才行.签名就代表着自己的身份(即keystore),多个app可以使用同一个签名. 如 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. Scala数组| 集合
			
    arrays :+ 5尾部   头部5 +: arrays TODO 声明不可变数组,不能删; 默认情况下,scala中集合的声明全都是不可变的 val arrays: Array[Int] = Ar ...
    
			
    2. 
						
  2. Mqtt使用教程，简介
			
    1,简介 MQTT协议(Message Queuing Telemetry Transport),翻译过来就是遥信消息队列传输,是IBM公司于1999年提出的,现在最新版本是3.1.1.MQTT是一个 ...
    
			
    3. 
						
  3. Python requests--初识接口自动化
			
    requests模块初级宝典:http://docs.python-requests.org/zh_CN/latest/user/quickstart.htmlrequests模块之葵花宝典:http ...
    
			
    4. 
						
  4. Android源代码下载 “Gerrit下载源代码”
			
    repo init -u ssh://jenkins@gerrit.y:29419/manifest -m k86A.xml 使用-m参数指定具体使用的是k86A.mxl文件 步骤1. curl ht ...
    
			
    5. 
						
  5. saprfc
			
    PHP在使用saprfc的时候,首先需要安装 saprfc 拓展,然后在引入saprfc.php类库,最后在使用.   一.PHP saprfc拓展的安装(Linux):   安装方法:   安装时需 ...
    
			
    6. 
						
  6. 16进制转化8进制---map
			
    #include "stdio.h" #include "string.h" #include "string" #include &quo ...
    
			
    7. 
						
  7. jenkins配置自动发送邮件，抄送
			
    1.安装插件.系统管理-安装插件:可选插件:搜索Email Extension 2.设置全局变量.系统管理-系统设置:a.Jenkins Location 设置发送方邮件--- b.Extended  ...
    
			
    8. 
						
  8. CentOS最基本的20个常用命令
			
    1. man 对你熟悉或不熟悉的命令提供帮助解释eg:man ls 就可以查看ls相关的用法注:按q键或者ctrl+c退出,在linux下可以使用ctrl+c终止当前程序运行. 2. ls 查看目录或 ...
    
			
    9. 
						
  9. Android的几种Manager
			
    电话管理器TelephoneManager 第一个实例是获取网络和SIM卡信息:界面是一个列表,这里省略,Java代码如下: public class MainActivity extends Act ...
    
			
    10. 
						
  10. centos下etcd集群安装
			
    先仔细了解学习etcd 官方: https://github.com/etcd-io/etcd https://www.cnblogs.com/softidea/p/6517959.html http ...
    
			
    11.