cycle标签和random两种方式美化表格
一: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无法正确识别而报错
def red(request):
user = models.User.objects.all()
change_color = ['red','yellow','green']
return render(request,'helloapp/red.html',locals())
cycle标签和random两种方式美化表格的更多相关文章
- C# 如何通过mailto标签和SMTP协议两种方式发送邮件
本文主要讲解如何通过如现mailto标签和SMTP协议两种方式发送邮件,下面就直入主题 方法一.通过mailto标签发送邮件 通过mailto不是正真意义上的发送邮件,它只是会自动调用我们本地默认的邮 ...
- Javascript绑定事件的两种方式的区别
命名函数 <input type="button" onclick="check()" id="btn"/> <scrip ...
- 在基于MVC的Web项目中使用Web API和直接连接两种方式混合式接入
在我之前介绍的混合式开发框架中,其界面是基于Winform的实现方式,后台使用Web API.WCF服务以及直接连接数据库的几种方式混合式接入,在Web项目中我们也可以采用这种方式实现混合式的接入方式 ...
- placeholder实现的两种方式
/** * PlaceHolder组件 * $(input).placeholder({ * word: // @string 提示文本 * color: // @string 文本颜色 * evtT ...
- java中实现同步的两种方式:syschronized和lock的区别和联系
Lock是java.util.concurrent.locks包下的接口,Lock 实现提供了比使用synchronized 方法和语句可获得的更广泛的锁定操作,它能以更优雅的方式处理线程同步问题,我 ...
- spring配置属性的两种方式
spring配置属性有两种方式,第一种方式通过context命名空间中的property-placeholder标签 <context:property-placeholder location ...
- Code First02---CodeFirst配置实体与数据库映射的两种方式
Code First有两种配置数据库映射的方式,一种是使用数据属性DataAnnotation,另一种是Fluent API. 这两种方式分别是什么呢?下面进行一一解释: DataAnnotation ...
- 将html页改成jsp的两种方式
将html页改成jsp的两种方式 作者: 字体:[增加 减小] 类型:转载 时间:2013-08-13 将html页改成jsp有两种方法,第一种是直接修改html文件,另一种是新建jsp文件.下面为大 ...
- Android Studio签名打包的两种方式
签名打包的两种方式: 注:给我们自己开发的app签名,就代表着我自己的版权,以后要进行升级,也必须要使用相同的签名才行.签名就代表着自己的身份(即keystore),多个app可以使用同一个签名. 如 ...
随机推荐
- 基于PySpark的网络服务异常检测系统 (四) Mysql与SparkSQL对接同步数据 kmeans算法计算预测异常
基于Django Restframework和Spark的异常检测系统,数据库为MySQL.Redis, 消息队列为Celery,分析服务为Spark SQL和Spark Mllib,使用kmeans ...
- Intellij IDEA导入eclipse项目配置jdk、tomcat到浏览器正常访问
转发自:博客园---Lindp(大佬写的甚好) 以下是转发的正文 intellij idea中文资料网上比较少,对于eclipse的项目如何导入intellij idea也没有完整的说明,本人在这里整 ...
- python与RabbitMQ
RabbitMQ 前言 什么是MQ? MQ全称为Message Queue, 消息队列(MQ)是一种应用程序对应用程序的通信方法.应用程序通过读写出入队列的消息(针对应用程序的数据)来通信,而无需专用 ...
- __x__(4)0905第二天__软件架构
软件架构 C/S 架构,客户端/服务器,用户通过客户端使用软件. 一般的应用软件都是 C/S 架构,如 QQ,360 等等. C 为 Client,用户电脑使用的软件. S 为 Server,服务器, ...
- CentOS裸机环境下安装php-7.3.1
安装步骤如下 安装必要的软件 获取源码 编译安装 安装过程可能遇到的一些问题 编译参数详解 安装步骤如下 安装必要的软件 yum install -y autoconf automake libtoo ...
- Havel-Hakimi定理的方法来构图
给定一组非负数字,(数字为节点的度),判断该组数字能不能构成图. Havel-Hakimi定理: 将序列按照从大到小排序之后,从第二个数开始到第一个数的长度+1为止,依次减1.每操作一次,删掉第一个数 ...
- JavaScript 中 replace方法 替换所有字符串
需要替换一个字符串中所有的某个字符串 java中使用replaceAll()方法就可以了.但是JavaScript中没有replaceAll方法 但是可以通过以下方法实现: /** * 空格替换为下划 ...
- node 学习(一)
什么是 Node.js Node.js就是运行在服务端的JavaScript. Node.js是一个基于Chrome JavaScript运行时建立的一个平台. Node.js是一个事件驱动 I/O ...
- 织梦,dede:list和dede:artlist的区别
dede:list可以配合pagelist进行分页,而artlsit不能进行分页. 如果要翻页只能用list的
- iview select filterable属性使用下拉小bug
今天做项目时候在iview 原生自带的select中设置filterable,下拉时候可进行查询,但是发现选中载打开模态框每次都绑定上一次的值,解决方案就是在关闭弹框时候将this.$refs.sto ...