如何获取表单中的动态 html 表格条目到烧瓶？答案

【问题标题】：How to get dynamic html table entries in a form to flask?如何获取表单中的动态 html 表格条目到烧瓶？
【发布时间】：2020-10-22 05:54:05
【问题描述】：

我正在尝试创建一个带有嵌入式表格的表单，用户可以在将内容输入单元格输入时动态添加和删除表格行。

HTML

<form id="myForm" action="{{ url_for('hello_world') }}" method="POST">
      <div class="form-row text-left">
          <div class="col-1 text-left">
              <input type="checkbox" id="skills" name="skills" value="Yes">
          </div>
          <div class = "col-11 text-left">
              <h2>TECHNICAL SKILLS</h2>
          </div>
      </div><!--form-row-->
      <div class="form-row">
       <table id="myTable" name="skillsTable">
         <tr>
           <th>Category</th>
           <th>Entries</th>
         </tr>
       </table>
   </div><!--form-row-->
   <br>
   <button type="button" onclick="addSkill()">Add Row</button>
   <button type="button" onclick="deleteSkill()">Delete row</button>
   <hr>
    <input type="submit" value="Submit" onclick="submit()" />
</form>

正如您在屏幕截图中看到的那样 [![用户表单的屏幕截图][1]][1]，name 属性已正确附加到添加的单元格中。

目标是有一种方法可以将用户动态创建的表值转移到可以显示它们的烧瓶模板中。

Javascript

  <script>

  var c1=0;
  var c2=0;

  function addSkill() {

    var table = document.getElementById("myTable");
    var row = table.insertRow(-1);
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);
    cell1.innerHTML = "<input type='text' value=' ' name=cell1_"+c1.toString()+"> ";
    cell2.innerHTML = "<input type='text' value=' ' name=cell2_"+c2.toString()+"> ";
    c1++;
    c2++;      
  }

  function deleteSkill() {
    document.getElementById("myTable").deleteRow(-1);
  }
</script>

我尝试使用计数器为每个新创建的单元格设置名称属性，但这仍然没有显示在烧瓶模板中呈现：

烧瓶

@app.route('/hello_world', methods=['GET', 'POST'])
def hello_world():
    if request.method == 'POST':
        result = {}    

        try:
            skills = request.form['skills']
            result['skills'] = skills

            result['value'] = request.form['cell1_1']
        except:
            pass
        return render_template("result.html",result = result)

result.html


    {% if result.skills %}

    <p>{{ result.value }}</p>

    {% endif %}

在这个例子中，如果复选框被选中，我希望在提交表单后看到“语言”出现。如果<input> 元素是动态创建的，我如何从flask 中引用表格并循环它们？谢谢 [1]：https://i.stack.imgur.com/samhG.png

【问题讨论】：

标签： python html forms flask dynamic

【解决方案1】：

result.html


  {% if result.skills %}
    {% set skillsTable = result.skillsTable %}
    <h2>TECHNICAL SKILLS</h2>
    <table>
      {% for skill in skillsTable %}
        {% if loop.index|int % 2 == 0 %}
        <tr><td>{{ skillsTable.pop(0) }}:</td><td>{{ skillsTable.pop(0) }}</td></tr>
        {% else %}
          <tr><td>{{ skillsTable.pop(0) }}:</td><td>{{ skillsTable.pop(0) }}</td></tr>
        {% endif %}
       {% endfor %}
    {% endif %}

烧瓶

@app.route('/hello_world', methods=['GET', 'POST'])
def hello_world():
    if request.method == 'POST':
        result = {}
        try:           
            skills = request.form['skills']
            result['skills'] = skills
            result['skillsTable'] = []
            form = request.form
            for key, value in form.items():
                if key.startswith("cell"):
                    result['skillsTable'].append(value)
        except:
            pass

        return render_template("result.html",result = result)

【讨论】：