如何将Flask表格单元格的id值传递给后端Python函数？

实现方法 #

你当前的代码缺少两个核心逻辑：一是点击事件没有传递当前行的id参数，二是没有前端跳转逻辑把id传给后端路由，下面提供两种可直接复用的实现方案：

方案1：直接用链接跳转（无需额外JS，最简便） #

直接把id单元格用a标签包裹，通过Flask模板自带的url_for方法生成对应详情页的访问地址，自动携带id参数：

<tbody>
   {% for record in records %}
   <tr>
      <td>
        <a href="{{ url_for('search_results', id=record.id) }}">{{ record.id }}</a>
      </td>
      <td>{{ record.contractor }}</td>
      <td>{{ record.category }}</td>
      <td><a href='tel:{{ record.phone }}'>{{ record.phone }}</a></td>
   </tr>
   {% endfor %}
</tbody>

点击id后会自动跳转到/detail/对应id的路径，后端路由可以直接拿到id参数。

方案2：保留onclick触发逻辑的实现 #

如果需要保留点击单元格触发函数的逻辑，需要补全JS跳转逻辑和参数传递：

1. 首先在模板中新增JS函数处理跳转：

<script>
function search_results(targetId) {
  // 拼接路径跳转到详情页
  window.location.href = `/detail/${targetId}`;
}
</script>

2. 修改表格的点击事件，传入当前行的id：

<tbody>
   {% for record in records %}
   <tr>
      <td onclick="search_results({{ record.id }})">{{ record.id }}</td>
      <td>{{ record.contractor }}</td>
      <td>{{ record.category }}</td>
      <td><a href='tel:{{ record.phone }}'>{{ record.phone }}</a></td>
   </tr>
   {% endfor %}
</tbody>

后端代码优化建议 #

你当前的查询返回的是查询集，单个id对应唯一记录的话可以用first()直接取对象，减少模板遍历的逻辑：

@app.route('/detail/<id>')
def search_results(id):
    record = db.session.query(Feedback).filter(Feedback.id == id).first()
    return render_template('pageDetail.html', record=record)

内容的提问来源于stack exchange，提问作者Rob Thompson