使用python动态为行和列创建html网格

时间:2018-12-07 03:21:21

标签: python html python-3.x flask bootstrap-4

我正在尝试使用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)

1 个答案:

答案 0 :(得分:1)

如果我理解正确,则希望在第4行中打印userName的元素。如果最后一行不完整,则无论如何都要结束行,如下所示:

| 1 | 2 | 3 | 4 |
| 5 | 6 | 7 |

为便于在以下代码中进行演示,我在中间缩短了HTML,但是无论如何它应该可以工作。在这里,我们可以让Python通过使用数组切片来跟踪位置(即,如果x = [1,2,3,4]x[0:2][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的模板。