一：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. Mapjoin和Reducejoin案例
			
    一.Mapjoin案例 1.需求:有两个文件,分别是订单表.商品表, 订单表有三个属性分别为订单时间.商品id.订单id(表示内容量大的表), 商品表有两个属性分别为商品id.商品名称(表示内容量小的 ...
    
			
    2. 
						
  2. 一道简单的dp题 --- Greenhouse Effect CodeForces - 269B
			
    题目链接: https://vjudge.net/problem/36696/origin 题目大意: 要求从1到m升序排列,点可以随意移动,问最少需要移动多少次, 思路: 动态规划 可以推出转移方程 ...
    
			
    3. 
						
  3. CodeForces - 1013B And 与运算暴力
			
    题目链接: https://vjudge.net/problem/1735275/origin 基本思路: 本题思路比较简单,首先,我们知道 a & x = b, b & x = b; ...
    
			
    4. 
						
  4. [Python]sort与sorted高级技巧
			
    与其他语言不同,python 3.0之后,弃用了其他语言中常见的cmp方法,在sort方法中改用key实现. 之前一直疑惑自定义对象的排序如何写comparator,最后发现还是通过内部的__cmp_ ...
    
			
    5. 
						
  5. Python数据分析基础PDF
			
    Python数据分析基础(高清版)PDF 百度网盘 链接:https://pan.baidu.com/s/1ImzS7Sy8TLlTshxcB8RhdA 提取码:6xeu 复制这段内容后打开百度网盘手 ...
    
			
    6. 
						
  6. 使用gitflow流程完成功能时报错
			
    报错 fatal: could not read Username for 'https://github.com': ······ 原因 使用https方式的时候 在https url 里面没有用户 ...
    
			
    7. 
						
  7. NOIP-铺地毯
			
    题目描述 为了准备一个独特的颁奖典礼,组织者在会场的一片矩形区域(可看做是平面直角坐标系的第一象限)铺上一些矩形地毯.一共有n张地毯,编号从1到n.现在将这些地毯按照编号从小到大的顺序平行于坐标轴先后 ...
    
			
    8. 
						
  8. springboot集成springsession利用redis来实现session共享
			
    转:https://www.cnblogs.com/mengmeng89012/p/5519698.html 这次带来的是spring boot + redis 实现session共享的教程. 在sp ...
    
			
    9. 
						
  9. 30、进程的基础理论，并发（multiprocessing模块）
			
    我们之前基于tcp所做的通信都只能一个一个链接只有关闭当前链接时才能去链接下一个通信,这显然与现实情况不合.今天我们将来学一个新的概念进程,来做一个python多进程的并发编程.还会贴一个用json序 ...
    
			
    10. 
						
  10. 总结：极光推送java服务端（1）
			
    遇到的问题: 1.怎么用极光推送 2.极光推送发送失败报错 返回{ } 3.透传和推送区别以及怎么设置 我的解决方案: 问题1.极光推送类里面有不同的方法,需要发给那些人就调用相应的方法.有安卓.io ...
    
			
    11.