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无法正确识别而报错
<!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>
1 def red(request): 2 user = models.User.objects.all() 3 change_color = ['red','yellow','green'] 4 return render(request,'helloapp/red.html',locals())
python 中文名:蟒蛇,设计者:Guido van Rossum