【web】web前端table循环显示整理（列表+字典+QuerySet）

微雨停了

已于 2022-04-21 23:25:36 修改

阅读量3.6k

点赞数 2

分类专栏： django 文章标签： django python 前端 html

于 2022-04-16 23:57:39 首次发布

本文链接：https://blog.csdn.net/qq_45859826/article/details/124222534

版权

django 专栏收录该内容

12 篇文章 11 订阅

订阅专栏

一、列表

1.1 后端数据

[
['PHPINFO', 'http://192.168.137.129//phpinfo.php'],
['PHPMyadmin', 'http://192.168.137.129//phpMyAdmin/index.php']
]

1.2 前端代码

  <table class="table"> 
   <tbody>
    <tr> 
     <th>返回类型</th> 
     <th>返回结果</th> 
    </tr> 
    
    {% for i in result %} 
    <tr> 
     <td>{{ i.0 }}</td> 
     <td>{{ i.1 }}</td> 
    </tr>
    {% endfor %} 
    
   </tbody>
  </table>

1.3 前端效果

在这里插入图片描述

1.4 python与django遍历列表的区别：

1.4.1 python

1.遍历

for i in list:

2.取值

list[0]

1.4.2 django

1.遍历

{% for i in list %}

2.取值

list.0

二、字典

2.1 后端数据

{
    "1": "http://wap.baidu.com/", 
    "2": "https://juejin.baidu.com/", 
    "3": "https://crm.baidu.com/one-base/", 
    "4": "https://qianxi.baidu.com/", 
    "5": "https://dumall.baidu.com/", 
    "6": "https://srf.baidu.com/site/guanwang_linux/index.html", 
    "7": "https://kaidian.baidu.com/mallplat/index.html", 
    "8": "https://kaiwu.cloud.baidu.com/", 
    "9": "https://aiqicha.baidu.com/downapp", 
    "10": "https://pan.baidu.com/doc/share/NPiDN2eEczhy~otSxgvGLQ-334096643333378"
}

2.2 前端代码

  <table class="table"> 
   <tbody>
    <tr> 
     <th>序号</th> 
     <th>返回地址</th> 
    </tr> 
    
    {% for key,value in res_list.items %} 
    <tr> 
     <td>{{ key }}</td> 
     <td><a href="{{ value }}">{{ value }}</a></td> 
    </tr> 
    {% endfor %} 
    
   </tbody>
  </table>

2.3 前端效果

在这里插入图片描述

2.4 python与django遍历字典的区别：

2.4.1 python

1.取键

for key in dict.keys():

2.取值

for value in dict.values():

3.取键、值

for key,value in dict.items():

2.4.2 django

1.取键

{% for key in dict.keys %}

2.取值

{% for value in dict.values %}

3.取键、值

{% for key,value in dict.items %}

2.5 字典中加入新键值对的方法：

dict={}
dict['id'] = '1'

三、外列表，内字典（一）

3.1 后端数据

[
{'序号': 1, '名称': '域名gxzc com启用了顺米网shunmi com的DNS服务 ', '域名': 'gxzc.com'}, 
{'序号': 2, '名称': '淘宝网 - 淘！我喜欢', '域名': 'shop538256108.taobao.com'},
{'序号': 3, '名称': '  50   48   50   49   27431   27954   26479   20915   36187   39044   27979   45   26435   23041   24179   21488 ', '域名': 'good5000.com'}, 
{'序号': 4, '名称': ' 50   48   50   49   27431   27954   26479   20915   36187   39044   27979   45   26435   23041   24179   21488 ', '域名': 'www.good5000.com'}, 
{'序号': 5, '名称': 'Null', '域名': '88963ar.com'}, 
{'序号': 6, '名称': 'Null', '域名': 'www.chinadolls.org'}, 
{'序号': 7, '名称': '去哪里**nba比赛_NBA**直播-劲爆**平台', '域名': 'www.xjhuidaojia.com'}, 
{'序号': 8, '名称': '没有找到站点', '域名': 'www.gzzta.com'}
]

3.2 前端代码

代码如下（示例）：

  <table class="table"> 
   <tbody>
    <tr> 
     <th>序号</th> 
     <th>名称</th> 
     <th>域名</th> 
    </tr>
    {% for i in res_list %} 
    <tr>
      {% for j in i.values %} 
     <td>{{ j }}</td> 
     {% endfor %} 
    </tr> 
    {% endfor %} 
   </tbody>
  </table>

3.3 前端效果

在这里插入图片描述

四、外列表，内字典（二）

4.1 后端数据

[
{'domain': 'admin.jd.com', 'ip': '172.16.135.165', 'id': 1}, {'domain': 'adm.jd.com', 'ip': '124.250.32.207', 'id': 2}, {'domain': 'index.jd.com', 'ip': '172.22.135.80', 'id': 3}, {'d
omain': 'user.jd.com', 'ip': '111.13.28.191', 'id': 4}, {'domain': 'sys.jd.com', 'ip': '111.13.28.191', 'id': 5}, {'domain': 'system.jd.com', 'ip': '172.16.132.228', 'id': 6}, {'domain
': 'test.jd.com', 'ip': '192.168.171.197', 'id': 7}, {'domain': 'dev.jd.com', 'ip': '106.39.169.99', 'id': 8}, {'domain': 'pro.jd.com', 'ip': '120.52.87.112', 'id': 9}, {'domain': 'uat
.jd.com', 'ip': '111.13.28.191', 'id': 10}, {'domain': 'env.jd.com', 'ip': '111.13.28.191', 'id': 11}, {'domain': 'data.jd.com', 'ip': '111.13.28.191', 'id': 12}, {'domain': 'get.jd.co
m', 'ip': '36.110.188.54', 'id': 13}, {'domain': 'ops.jd.com', 'ip': '172.28.60.64', 'id': 14}, {'domain': 'global.jd.com', 'ip': '120.52.148.52', 'id': 15}, {'domain': 'group.jd.com',
 'ip': '111.206.227.232', 'id': 16}, {'domain': 'hotel.jd.com', 'ip': '111.206.227.232', 'id': 17}, {'domain': 'city.jd.com', 'ip': '111.13.28.191', 'id': 18}, {'domain': 'search.jd.co
m', 'ip': '120.52.87.112', 'id': 19}
]

3.2 前端代码

代码如下（示例）：

  <table class="table"> 
   <tbody>
    <tr> 
     <th>序号</th> 
     <th>域名</th> 
     <th>IP</th> 
    </tr>
    {% for i in res_list %} 
    <tr>
      <td>{{ i.id }}</td>
      <td>{{ i.domain }}</td>
      <td>{{ i.ip }}</td>
    </tr> 
    {% endfor %} 
   </tbody>
  </table>

4.3 前端效果

在这里插入图片描述

五、外字典，内列表

5.1 后端数据

{
	1: ['A', '140.205.94.189', '152'], 
	2: ['A', '140.205.220.96', '152']
}

5.2 前端代码

  <table class="table"> 
   <tbody>
    <tr> 
     <th>序号</th> 
     <th>响应类型</th> 
     <th>响应IP</th> 
     <th>TTL</th> 
    </tr> 
    
    {% for key,value in res_list.items %} 
    <tr> 
     <td>{{ key }}</td> 
     <td>{{ value.0 }}</td> 
     <td>{{ value.1 }}</td> 
     <td>{{ value.2 }}</td> 
     <td>{{ value.3 }}</td> 
    </tr> 
    {% endfor %} 
    
   </tbody>
  </table>

5.3 前端效果

在这里插入图片描述

六、django.db.models.query.QuerySet

6.1 后端数据

<QuerySet 
[
	<users: users object (12)>,
	<users: users object (11)>, 
	<users: users object (8)>,
	<users: users object (7)>,
    <users: users object (9)>,
    <users: users object (10)>
]>

QuerySet是Django的ORM为了达到跟SQL语句同样的表达能力，通过给Model增加一个objects属性来提供各种数据操作的接口。

数据库中内容：
在这里插入图片描述

6.2 前端代码

{% for data in userslist %}
</tr>
         <td>{{ data.id }}</td>
         <td>{{ data.username }}</td>
         <td>{{ data.password }}</td>
         <td>{{ data.created_time|date:'Y-m-d H:i:s' }}</td>
         <td>{{ data.update_time|date:'Y-m-d H:i:s' }}</td>
</tr>
{% endfor %}

6.3 前端效果

在这里插入图片描述

总结

tr标签中有几个td就有几列，以下数据类似字典！！

</tr>
         <td>{{ data.id }}</td>
         <td>{{ data.username }}</td>
         <td>{{ data.password }}</td>
         <td>{{ data.created_time|date:'Y-m-d H:i:s' }}</td>
         <td>{{ data.update_time|date:'Y-m-d H:i:s' }}</td>
</tr>