一：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. 初窥Java之六
			
    一.二维数组 1.动态创建 数组中元素类型[] 数组名 = new 数组中元素类型[]; 例如:int[][] arr = new int[二维数组的长度][一维数组的长度]: Int[][] arr ...
    
			
    2. 
						
  2. SA：T1编写主函数法和T2Matlab自带的SA工具箱GUI法，两种方法实现对二元函数优化求解——Jason niu
			
    %SA:T1法利用Matlab编写主函数实现对定义域[-5,5]上的二元函数求最优解—Jason niu [x,y] = meshgrid(-5:0.1:5,-5:0.1:5); z = x.^2 + ...
    
			
    3. 
						
  3. Jarvis OJ 一些简单的re刷题记录和脚本
			
    [61dctf] androideasy 164求解器 50 相反 脚本如下: s='' a=113, 123, 118, 112, 108, 94, 99, 72, 38, 68, 72, 87,  ...
    
			
    4. 
						
  4. C#中new的三种用法
			
    在 C# 中,new 关键字可用作运算符.修饰符或约束. 1)new 运算符:用于创建对象和调用构造函数. 2)new 修饰符:在用作修饰符时,new 关键字可以显式隐藏从基类继承的成员. 3)new ...
    
			
    5. 
						
  5. JAVA基础复习与总结<二>构造方法_static关键字_final关键字
			
    构造方法详解 构造器也叫做构造方法(constructor),用于对象的初始化. class Person2 { String name; int age; public Person2(String ...
    
			
    6. 
						
  6. springboot2.0以后WebMvcConfigurationSupport代替WebMvcConfigurationAdapter
			
    1:WebMvcConfigurationSupport代替WebMvcConfigurationAdapter https://blog.csdn.net/wilsonsong1024/articl ...
    
			
    7. 
						
  7. swift中Cell的内容定制
			
    1.cellForTitle 2.register
    
			
    8. 
						
  8. winform 利用Http向服务器上传与下载文件
			
    利用在服务器端的IIS,布置“请求处理映射”.从而处理,本地发出Post请求.Url指向web网站所在路径的请求映射.由映射代码实现服务器保存文件. winform里面使用,WebClient的对象, ...
    
			
    9. 
						
  9. 剑指offer——python【第60题】把二叉树打印成多行
			
    题目描述 从上到下按层打印二叉树,同一层结点从左至右输出.每一层输出一行.#类似于二维列表[[1,2],[4,5]] 解题思路 其实这倒题和其他类似的题有所区别,这里是分层打印,把每层的节点值放在同一 ...
    
			
    10. 
						
  10. php发送邮箱重置密码链接,并在重置成功后使链接失效 (ThinkPHP5)
			
    /** * 重置密码页,验证链接有效性,页面发送邮件调用sendResetPwdEmail()方法 */ public function resetPwd() { $param = input('') ...
    
			
    11.