如何使用烧瓶创建可编辑的输入表答案

【问题标题】：How to create an editable input tabel using flask如何使用烧瓶创建可编辑的输入表
【发布时间】：2021-05-14 12:59:33
【问题描述】：

我是 Flask 的新手，我想通过表格为应用程序（由烧瓶提供动力）提供一些输入，并将输入写入 json 文件并通过点击按钮将其保护在本地。有没有没有数据库的方法，也许只用 javascript？

表格应该是什么样子的：它应该是一个动态表格，就像在加载页面时使用预定义的列（例如“姓名”和“年龄”）的 3 个空行，然后您可以输入一些值。如果您需要 5 行，则应该有一个“添加行”按钮来添加新行，并且每行应该有一个“删除行”按钮。

最小的例子（基本上只是烧瓶中的一个hello world）

main.py

from flask import Flask, render_template
from flask import url_for

app = Flask(__name__)

@app.route('/')
def load_index():
   return render_template('main.html')

if __name__ == '__main__':
   app.run(debug = True)

main.html

<!doctype html>
<html>
    <body>

        *tabel here*
        
   </body>
</html>

不幸的是，我发现的大多数教程都只是主题化了如何显示现有数据库或 pd 数据框的数据表... 我希望这里有人知道我的问题的解决方案或有提示。谢谢！

【问题讨论】：

标签： javascript python json flask

【解决方案1】：

是的，您可以使用 javascript 将其存档。只需为您的输入表单和表格提供一个 ID，然后从表格中获取数据并编辑您的表格。你需要学习的是如何从表单中获取数据。为此，您可以使用 FormData 对象

var myForm = document.getElementById('myForm');
formData = new FormData(myForm);

您可以在此处了解更多信息：https://developer.mozilla.org/docs/Web/API/FormData/FormData

至于你可能想要使用 insertRow 和 insertCell 的表格：

// Find a <table> element with id="myTable":
var table = document.getElementById("myTable");

// Create an empty <tr> element and add it to the 1st position of the table:
var row = table.insertRow(0);

// Insert new cells (<td> elements) at the 1st and 2nd position of the "new" <tr> element:
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);

// Add some text to the new cells:
cell1.innerHTML = "NEW CELL1";
cell2.innerHTML = "NEW CELL2";

您可以在此处了解有关此主题的更多信息：https://www.w3schools.com/jsref/met_table_insertrow.asp

【讨论】：