AJAX如何动态地向表中添加行

我想知道是否有人可以帮助我弄清楚如何使用AJAX动态添加行到以下html每当数据库查询发现更多的记录。我正在使用python flask和pandas来创建一个具有节点信息的数据框，例如当节点处于ACTIVE状态时，或者处于SLEEP模式，LOCKED或UNLOCKED。我在想，我可以通过某种方式传递该数据框并遍历它，以创建一个包含该信息的表和指向该特定节点的另一个页面的链接。现在，我想我有第一部分下来，我张贴的页面，当它第一次带来了所有的记录节点。但我觉得这部分我也做错了。我想我有两个问题:

我怎么能传递一个数据框架的html和迭代通过它正确?

我如何使用AJAX在任何其他节点注册时向表添加另一行?我在想也许我传递一个列表的nodeID的HTML当我POST，然后有setInterval传递到python flask的一边，查询数据库，创建一个新的列表和比较..删除那些我已经添加，通过那些新的AJAX功能的数据框架随着nodeID的....的完整列表听起来对吗?

到目前为止，我只能找出这个POST，但不知道下一步该怎么做:

<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瓶

@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)的数据帧

<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;