Python Flask实现点击表格ID跳转至另一页面对应ID行锚点咨询

1 修正Flask后端逻辑 #

原有的my_redirect路由硬编码了锚点值，需要改为动态接收芯片ID参数，拼接跳转链接：

from flask import *
import pandas as pd
app = Flask(__name__)

@app.route("/")
def show_home():
    return render_template('base.html')

@app.route("/mytable")
def show_table():
    # 此处默认CSV第一列为芯片ID，可根据实际情况调整
    data = pd.read_csv("Book1.csv", header = 0)
    myData = data.values 
    return render_template('view.html', myData=myData)
    
@app.route("/myredirect/<int:chip_id>")
def my_redirect(chip_id):
    # 动态将芯片ID作为锚点拼接至报告页URL末尾
    return redirect(url_for('show_table') + f'#{chip_id}')

if __name__ == "__main__":
    app.run(debug=True)

2 新增view.html模板（锚定生效的核心文件） #

需要给报告表的每一行绑定与芯片ID一致的id属性：

<!DOCTYPE html>
<html>
<body>
  <table border="1">
    <!-- 表头可根据实际需求调整 -->
    <thead>
      <tr>
        <th>芯片ID</th>
        <th>参数1</th>
        <th>参数2</th>
        <th>参数3</th>
      </tr>
    </thead>
    <tbody>
      {% for row in myData %}
      <!-- 第一列为芯片ID，直接作为行的id属性值 -->
      <tr id="{{ row[0] }}">
        <td>{{ row[0] }}</td>
        <td>{{ row[1] }}</td>
        <td>{{ row[2] }}</td>
        <td>{{ row[3] }}</td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</body>
</html>

3 修正base.html跳转链接 #

直接将芯片ID作为参数传给my_redirect路由即可：

<!DOCTYPE html>
<html>
<body>
  <!-- 示例为芯片表的ID跳转链接，实际使用时可循环生成所有芯片ID的链接 -->
  <p>
    <a href="{{ url_for('my_redirect', chip_id=5) }}">5</a>
  </p>
  <p>
    <a href="{{ url_for('my_redirect', chip_id=4) }}">4</a>
  </p>
</body>
</html>

如果你的CSV中芯片ID不在第一列，调整代码中row[0]的索引对应到ID所在列即可，修改完成后点击芯片ID即可跳转到报告页并自动定位到对应ID的行。

内容的提问来源于stack exchange，提问作者Jessica Poh