小编Rem*_*oij的帖子

我正在构建一个小型 Web 应用程序，允许用户通过几个表单输入字段（例如日期、交易金额、描述等）输入交易。每次用户单击“提交”按钮时，都会创建一个新的表行，每个输入字段有一列。除了构建此表之外，我还希望将输入数据发送到我的 Flask 应用程序。

我遇到的问题是，当用户单击“提交”时，页面刷新并且所有表行都消失了。我尝试的解决方案是只使用一个<button type="button"></button>带有 id 的标签，当用户单击它时，我的 Javascript 代码会添加一个表行而不刷新页面。但是，这不起作用，因为它不会将数据发送到我的 Flask 应用程序。我也尝试在 Javascript 中使用，sessionStorage.setItem但我不知道如何使其与我的特定代码一起工作，因为用户可以单击按钮 3 次以进行 3 个不同的事务，并且每次页面都会刷新。

所以我的问题是，如何在页面上创建和显示表格行，同时还将表单输入数据发送到我的 Flask 应用程序？

为了简单起见，我在这里只包含了 2 个输入字段，但实际上有 8 个。

HTML：

<form method="POST">
  <div class="list-group-item">
    <label>Date</label>
    <input class="form-control" id="datepicker" type="text" name=expDate value="">
  </div>
  <div class="list-group-item">
    <label>Amount Withdrawn</label>
    <input class="form-control" id="withAmount" type="text" name=expAmountWith value="">
  </div>
  <button id="submit-btn" type="submit" class="btn btn-light submit-btn">Submit</button>
</form>

JavaScript：

d3.selectAll('#submit-btn').on('click', buildTable);

function buildTable() {
    var dateInput = d3.select('#datepicker').property('value');
    var withAmount = d3.select('#withAmount').property('value');

    var tableArray = [] …