一：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. 基于PySpark的网络服务异常检测系统 (四) Mysql与SparkSQL对接同步数据  kmeans算法计算预测异常
			
    基于Django Restframework和Spark的异常检测系统,数据库为MySQL.Redis, 消息队列为Celery,分析服务为Spark SQL和Spark Mllib,使用kmeans ...
    
			
    2. 
						
  2. Intellij IDEA导入eclipse项目配置jdk、tomcat到浏览器正常访问
			
    转发自:博客园---Lindp(大佬写的甚好) 以下是转发的正文 intellij idea中文资料网上比较少,对于eclipse的项目如何导入intellij idea也没有完整的说明,本人在这里整 ...
    
			
    3. 
						
  3. python与RabbitMQ
			
    RabbitMQ 前言 什么是MQ? MQ全称为Message Queue, 消息队列(MQ)是一种应用程序对应用程序的通信方法.应用程序通过读写出入队列的消息(针对应用程序的数据)来通信,而无需专用 ...
    
			
    4. 
						
  4. __x__(4)0905第二天__软件架构
			
    软件架构 C/S 架构,客户端/服务器,用户通过客户端使用软件. 一般的应用软件都是 C/S 架构,如 QQ,360 等等. C 为 Client,用户电脑使用的软件. S 为 Server,服务器, ...
    
			
    5. 
						
  5. CentOS裸机环境下安装php-7.3.1
			
    安装步骤如下 安装必要的软件 获取源码 编译安装 安装过程可能遇到的一些问题 编译参数详解 安装步骤如下 安装必要的软件 yum install -y autoconf automake libtoo ...
    
			
    6. 
						
  6. Havel-Hakimi定理的方法来构图
			
    给定一组非负数字,(数字为节点的度),判断该组数字能不能构成图. Havel-Hakimi定理: 将序列按照从大到小排序之后,从第二个数开始到第一个数的长度+1为止,依次减1.每操作一次,删掉第一个数 ...
    
			
    7. 
						
  7. JavaScript 中 replace方法 替换所有字符串
			
    需要替换一个字符串中所有的某个字符串 java中使用replaceAll()方法就可以了.但是JavaScript中没有replaceAll方法 但是可以通过以下方法实现: /** * 空格替换为下划 ...
    
			
    8. 
						
  8. node 学习（一）
			
    什么是 Node.js Node.js就是运行在服务端的JavaScript. Node.js是一个基于Chrome JavaScript运行时建立的一个平台. Node.js是一个事件驱动 I/O  ...
    
			
    9. 
						
  9. 织梦，dede:list和dede:artlist的区别
			
    dede:list可以配合pagelist进行分页,而artlsit不能进行分页. 如果要翻页只能用list的
    
			
    10. 
						
  10. iview select filterable属性使用下拉小bug
			
    今天做项目时候在iview 原生自带的select中设置filterable,下拉时候可进行查询,但是发现选中载打开模态框每次都绑定上一次的值,解决方案就是在关闭弹框时候将this.$refs.sto ...
    
			
    11.