当表为空时，Flask Modal不工作

Question

我正在努力让这个模式正常工作。我有一个简单的flask web应用程序，它有一个SQLite数据库和一些JavaScript代码，可以通过模式向表中添加新行。

只要桌子上不再有一排，一切都很好。如果表为空，我将无法再打开模态。如果至少有一行，则模态工作正常并向右打开。

我已将代码上传到此处：https://jsfiddle.net/bq4seprt

我已经尝试调试错误，并得到以下错误消息：

Uncaught TypeError: Cannot read property 'style' of null at HTMLButtonElement.btn.<computed>.onclick

在线路上：

modal.style.display = "block";

Answer 1

代码中需要注意的几点

您不需要条件语句{% for row in rows %}来为您添加的每个项创建一个新的模态。使用{% for row in rows %}条件，当表为空时，没有模态类可供选择，因此模态为空。

您需要做的是删除当前模态的条件语句，从表单中获取数据，然后将新数据添加到sqlite中。您可以使用关闭按钮将模式显示设置为无，然后使用模式按钮将显示更改为块。您正在使用flask，所以我假设您已经有了从表单中获取数据并将其添加到sqlite数据库的代码。您只需要使用javascript来显示和隐藏模式

同样，对于代码中只存在一次的类，您不需要querySelectorAll，而是使用querySelector