Блог

Главная - Вопросы по программированию - Как создать редактируемую таблицу ввода с помощью flask

Как создать редактируемую таблицу ввода с помощью flask

#javascript #python #json #flask

Вопрос:

Я новичок в Flask и хотел бы предоставить приложению (работающему на базе flask) некоторый ввод с помощью вкладки, записать ввод в файл json и сохранить его локально, нажав кнопку. Есть ли способ без базы данных, может быть, просто с помощью javascript?

Как должна выглядеть таблица: Это должна быть динамическая таблица, как при загрузке страницы 3 пустые строки с предопределенными значениями (например, «имя» и «возраст»), а затем вы можете ввести некоторые значения. Если вам нужно 5 строк, для добавления новой строки должна быть кнопка «добавить строку», и в каждой строке должна быть кнопка «удалить строку».

Пример, что я имею в виду (особенно № 4-это бросить хорошо)

минимальный пример (в основном просто привет, мир в колбе)

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…
Я надеюсь, что кто-то здесь знает решение моей проблемы или имеет подсказку. Спасибо!

Ответ №1:

Да, вы можете заархивировать это с помощью javascript. Просто введите идентификатор формы ввода и таблицы, возьмите данные из формы и отредактируйте таблицу. что вам нужно узнать, так это как получать данные из формы. для этого вы можете использовать объект 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

Метки: