一：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. mysql命令之工作小结
			
    1.登客户端 mysql   -u userName  -p password   -h  ip    注:u 用户名   p 密码   h  ip地址 2.修改密码 UPDATE   mysql.u ...
    
			
    2. 
						
  2. 图书管理系统 (c语言实现) (全部代码)
			
    直接上代码不解释 #include <stdio.h> #include <stdlib.h> #include <string.h> #define AVAILA ...
    
			
    3. 
						
  3. antd中按需加载使用react-app-rewired报错
			
    [描述] 按照antd官网步骤 https://ant.design/docs/react/use-with-create-react-app-cn 最后yarn start会报错 [解决方法] 原因 ...
    
			
    4. 
						
  4. 20172328 2018-2019《Java软件结构与数据结构》第三周学习总结
			
    20172328 2018-2019<Java软件结构与数据结构>第三周学习总结 概述 Generalization 本周学习了第五章:队列.主要内容包含队列的处理过程.如何用对例如求解问 ...
    
			
    5. 
						
  5. 图论算法之DFS与BFS
			
    概述(总) DFS是算法中图论部分中最基本的算法之一.对于算法入门者而言,这是一个必须掌握的基本算法.它的算法思想可以运用在很多地方,利用它可以解决很多实际问题,但是深入掌握其原理是我们灵活运用它的关 ...
    
			
    6. 
						
  6. JavaScript的正则表达式的基础
			
    正则表达式:* 具体字符(字面值)*字符边界*字符集合[ace],[0123456789]*字符补集[^ qxz]: 不在qxz范围内*字符范围[a-z 0-9]*字符簇(系统定义好的常用集合)--- ...
    
			
    7. 
						
  7. __x__(27)0907第四天__ float 浮动
			
     float 浮动 块元素脱离文档流,水平排列. 浮动元素 会尽量往左上(left),或者右上(right)浮动,直到遇到 块元素 或者 其他浮动元素. 可选值: none;   默认值,不脱离文档流 ...
    
			
    8. 
						
  8. [Codeforces Round #433][Codeforces 853C/854E. Boredom]
			
    题目链接:853C - Boredom/854E - Boredom 题目大意:在\(n\times n\)的方格中,每一行,每一列都恰有一个被标记的方格,称一个矩形为漂亮的当且仅当这个矩形有两个角是 ...
    
			
    9. 
						
  9. Linux下卸载Oracle 11g
			
    第一种方法: 使用oracle自带的runInstaller 卸载 [oracle@VM_0_14_centos deinstall]$ cd $ORACLE_HOME [oracle@VM_0_14 ...
    
			
    10. 
						
  10. python +selenium +chrome/firefox  环境配置
			
    http://ftp.mozilla.org/pub/firefox/releases/ 各firefox版本下载地址 http://ftp.mozilla.org/pub/firefox/relea ...
    
			
    11.