python - 使用python为row和col动态创建html网格
问题描述
我正在尝试使用 python 创建一个行和列网格。基本情况是,对于 userName 列表中的第一个元素,我应该创建一个<div class="row">
理想的循环的每第四次迭代,我应该用另一个 div 关闭该行。
有点欺骗我的部分是,如果列表中的元素少于 4 个元素,如果列表中只有 3 个元素或列表中的 2 个元素,我仍然需要用另一个 div 正确关闭行.
希望我解释得足够好,请提出问题,我将再次解释我的意思。
# userName = ['Name1', 'Name2']
userName = ['Name1', 'Name2', 'Name3', 'Name4', 'Name5', 'Name6', 'Name7', 'Name8']
# userName = ['Name1', 'Name2', 'Name3']
html_card = ''
for count, element in enumerate(userName, 1): # Start counting from 1
# ADDING HTML ROW
if count % 4 == 0 or count == 1:
html_card += '<div class="row">'
# ADDING HTML CARD COL
html_card += '''\n<div class="col">
<div class="card card-block">
<div class="card mb-4 border-primary">
<div class="card-header bg-primary">{element}</div>
<div class="card-body text-primary">
<h4 style="color:#0069d9" class="card-title">{element} Performance Runs</h4>
<p style="color:#0069d9" class="card-text"></p>
<button type="button" class="btn btn-primary" value="Show Div" onclick="showDiv()">Available Runs</button>
</div>
</div>
</div>
</div>\n'''.format(element=element)
# ADDING HTML ROW DIV
if count % 4 == 0 or element == userName[-1]:
html_card += '</div>\n'
print(html_card)
解决方案
如果我理解正确,您希望以 4 行的形式打印 userName 的元素。如果最后一行未满,则无论如何都结束该行,如下所示:
| 1 | 2 | 3 | 4 |
| 5 | 6 | 7 |
为了在下面的代码中进行更简单的演示,我缩短了中间的 HTML,但无论如何它应该可以工作。x = [1,2,3,4]
在这里,我们可以让 Python 通过使用数组切片(即 if , then x[0:2]
is [1,2]
,因为x[a,b]
表示x
从索引开始a
并继续为b
元素的子列表)来完成跟踪位置的工作。
所以我们可以遍历我们想要的行集,并切出列值,如下所示:
userName = ['Name1', 'Name2', 'Name3', 'Name4', 'Name5', 'Name6', 'Name7']
row_length = 4
html_card = ''
for i in range(0, len(userName), row_length):
html_card += '<div class="row">'
for element in userName[i:i+row_length]:
html_card += '\n<div class="col">{element </div>\n'.format(element=element)
html_card += '</div>\n'
print(html_card)
通过简化 HTML,可以更轻松地查看代码中的内容。一种方法是在循环之外创建一个字符串,您可以将其用作调用 format 的模板。
推荐阅读
- python - 如何处理“取消” - django allauth linkedin
- flutter - Flutter:“SharedPreferences”的实例
- css - 带有扩展项目的不规则网格
- swift - 只打开 Package.swift 并使用 `swift package generate-xcodeproj` 然后打开生成的 xcodeproj 文件有什么区别?
- vega-lite - 点击添加标记
- python - 如何在转换为 html 时为特定的数据框列添加背景颜色
- python - 使用 f2py 在 Fortran 代码中调用 LAPACK 函数
- android - 连接到 BLE 设备
- c# - 选择默认规则
- python - 哪个 PEP(设计文档)决定使用 map(function,iterable) 而不是实现 list.map()