HTML / FLASK - 每行带有复选框的动态表答案

【问题标题】：HTML / FLASK - Dynamic Table with Checkboxes per rowHTML / FLASK - 每行带有复选框的动态表
【发布时间】：2020-05-15 15:10:46
【问题描述】：

使用 Flask / HTML，我正在动态填充目录列表表，我希望用户可以通过复选框选择单个或多个目录，但是当我选中除第一个表之外的任何表行上的框时，只有第一行的复选框被选中。我确保复选框的值是独立的，但是我希望每一行的复选框彼此唯一。

HTML：

<div id="select-form">
  <form action="" method="post">
    <h1>{{ directory.user_entered_path }}</h1>
    <table cellspacing="0" class="table">
      <tbody>
        <tr>
          <td class="head">Filename</td>
          <td class="head">Type</td>
          <td class="head">Size</td>
          <td class="head">Select</td>
        </tr>
        {% for file in dir_list %}
          <tr>
            <td name="name"> {{ file.file_name }}</td>
              <td> {{ file.file_type }} </td>
              <td> {{ file.file_size }}</td>
              <td><input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="{{file}}">
              <label class="form-check-label" for="inlineCheckbox1">&nbsp;</label></td>
          </tr>
       {% endfor %}
     </tbody>
   </table>
 </form>
</div>

【问题讨论】：

您的问题解决了吗？

标签： html flask html-table jinja2

【解决方案1】：

我尝试了以下方法：
在您的 html 末尾，在 <form></form> 中，为了方便，我添加了一个提交按钮，我不知道创建发布请求的另一种方法。

  <form action="" method="post">
    <h1>{{ directory.user_entered_path }}</h1>
    <table cellspacing="0" class="table">
      <tbody>
        <tr>
          <td class="head">Filename</td>
          <td class="head">Type</td>
          <td class="head">Size</td>
          <td class="head">Select</td>
        </tr>

        {% for file in dir_list %}
          <tr>
            <td name="name"> {{ file.file_name }}</td>
              <td> {{ file.file_type }} </td>
              <td> {{ file.file_size }}</td>
              <td><input class="form-check-input" type="checkbox" name="check" id="inlineCheckbox1" value="{{file}}">
              <label class="form-check-label" for="inlineCheckbox1">&nbsp;</label></td>
          </tr>
       {% endfor %}
     </tbody>
   </table>
  <!-- added this button -->
  <button type="submit" name="submit-button" value="Submit">submit</button>
 </form>

然后我将这条路线添加到烧瓶app.py

from flask import request, render_template

@app.route('/stack-dynamic-checkboxes', methods=["POST", "GET"])
def dynamic_checkboxes():
    if request.method == 'POST':
        if request.form['submit-button'] == "Submit":

            for checkbox in request.form.getlist('check'):
                print(checkbox)


    def afile(x):
        return {'file_name':f'file {x}',
                'file_type':f'type {x}',
                'file_size':f'size {x}'}

    dir_list = [afile(x) for x in range(10)]
    directory = {'user_entered_path':'a path'}

    return render_template( 'testing/stack-dynamic-checkboxes.html',
                           directory=directory,
                           dir_list=dir_list )

当我运行应用程序并使用您的 html 导航到页面时，选择一些复选框并按提交，我会获得有关打印到控制台的文件的信息。都是这种格式的字典

{'file_name': 'file 0', 'file_type': 'type 0', 'file_size': 'size 0'}

我希望这就是你要找的。p>

我一直在寻找一种方法来做到这一点。很高兴你发布了这个问题，因为我不明白我必须正确设置 HTML 部分的方式，所以，谢谢！

在未来，最好有更多的上下文，你的代码可能是什么样的，因为我不确定这是否是你要找的

【讨论】：