AJAX如何向表中动态添加行

Question

我想知道是否有人能帮我弄清楚，每当数据库查询发现更多记录时，如何使用AJAX动态地将行添加到下面的html中。我使用PythonFlask和pandas创建一个数据帧，其中包含节点信息，例如节点处于活动状态、处于睡眠模式、锁定或解锁状态时的信息。我在想，我可以通过某种方式传递该数据帧，并对其进行迭代，以创建一个包含该信息的表，以及指向该特定节点的另一个页面的链接。现在，我想我已经有了第一部分，当第一次显示所有记录的节点时，我正在发布页面。但我觉得我也做错了那部分。我想我有两个问题：

如何将数据帧传递给html并正确地遍历它

当任何其他节点注册时，如何使用AJAX向表中添加另一行？我在想，当我发布时，我可能会将一个nodeID列表传递给HTML，然后让setInterval将其传递给python flask端，查询数据库，创建一个新列表并进行比较..删除我已经添加的列表，将AJAX函数中新添加的数据框与一个完整的nodeID列表一起传递..这听起来正确吗

到目前为止，我只能在一篇文章中找到这一点，但不知道下一步该怎么做：

HTML

    <div class="container">
      <h2>Incubator List</h2>
      <p>List of Registered Encubators:</p>            
      <table class="table table-dark table-striped">
        <thead>
          <tr>
            <th>NodeID</th>
            <th>Last Update</th>
            <th>Status</th>
            <th>  </th>
            <th>Control Link</th>
          </tr>
        </thead>
      {% for node in nodes %}
        <tr>
          <td>{{ node.NodeID }}</td>
          <td>{{ node.last_update }}</td>
          {% if {{ node.Sleep }} == "True" %}
            <td><p class="bg-secondary text-white text-center">SLEEP</p>></td>
          {% else %}
            {% if {{ node.Active }} == "True" %}
              <td><p class="bg-success text-white text-center">ACTIVE</p></td>
            {% else %}
              <td><p class="bg-danger text-white text-center">NOT ACTIVE</p>></td>
            {% endif %}
          {% endif %}
          {% if {{ node.LOCK }} == "True" %}
            <i class="fas fa-lock"></i>
          {% else %}
            <i class="fas fa-unlock"></i>
          {% endif %}
          <td>
            <form action="/nodeslist" METHOD = "POST">
              <input type="hidden" id="NodeID" name="NodeID" value={{ node.NodeID }}>
              <input TYPE="SUBMIT" value="Access" class = "btn btn-success">
                </form>
          </td>
        </tr> 
      {% endfor %}
    </tbody>
  </table>
    </div>
<script>
    function UPDATEnodelist(nodeIDlist) { 
        $.get('/nodeDHT?nodeIDlist ='+nodeIDlist , 
            function(data){
                const parsed = JSON.parse(data)
                nodeIDlist = parsed.nodeIDlist;
                something-pandas-dataframe-something;
            };
        )
    };

    setInterval(function () {
            UPDATEnodelist(nodeIDlist);
            return false;
    }, 2500);
</script>
{% endblock content %}

python flask

@app.route('/nodeslist', methods=['POST','GET'])
def nodelist():
    df= DAO.Pull_Type_Nodes()
    if request.method == "POST":
        title='List of Registered Nodes')
        nodeIDlist = nodes.NodeID.unique()
        nodes = df.to_json(orient ='records')
        return render_template('nodeslist.html',title=title, nodes=nodes, nodeIDlist=nodeIDlist) 
    else:
        oldnodeIDlist = request.form['NodeID']
        add_df = df[~df['NodeID'].isin(oldnodeIDlist)]
        new_nodes = add_df.to_json(orient ='records')
        return new_nodes,nodeIDlist

如果您有任何帮助，我们将不胜感激

编辑：

响应应该是一个带有字段“nodeID”、“sleep”（bool）、“lock”（bool）、“active”（bool）的数据帧

Answer 1

<table id="table" class="table table-dark table-striped">
  <thead>
    <tr>
      <th>NodeID</th>
      <th>Last Update</th>
      <th>Status</th>
      <th></th>
      <th>Control Link</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <form action="/nodeslist" METHOD="POST">
          <input type="hidden" id="NodeID" name="NodeID" value={{ node.NodeID }}>
          <input TYPE="SUBMIT" value="Access" class="btn btn-success" id="btn">
        </form>
      </td>
    </tr>
  </tbody>
</table>

const date = new Date();
const data = [...Array(10).keys()].map(id => {
  return {
    id: id+1,
    date: new Date((Math.random() * 10000000) + date.getTime()).toLocaleString(),
    status: Math.floor(Math.random() * 2),
  };
});

const tbody = document.querySelector('#table').querySelector('tbody');

function test(evt) {
  evt.preventDefault();
  let fragment = document.createDocumentFragment();
  data.forEach(d => {
    let tr = document.createElement('tr');
    Object.keys(d).forEach(x => {
      let td = document.createElement('td');
      let textNode = document.createTextNode(d[x]);
      td.appendChild(textNode);
      tr.appendChild(td);
    })
    fragment.appendChild(tr);
  });
  tbody.appendChild(fragment);
}

document.querySelector('#btn').onclick = test;

这里正在工作example