通过单击表格行重定向到烧瓶路线功能

Question

我有一个包含多行的表格，我正在寻找如何设置 html/js 以允许用户单击表格行元素上的任意位置并将它们重定向到一个烧瓶路由，例如 { {1}}

此处显示的行：

我正在寻找一种方法来使用行上 data-id 属性中的 id 来填充烧瓶路线的动态部分。我不想使用可以使用 /group/<group_id> 的按钮，所以我正在寻找替代方法。

烧瓶路线.py

<a>

行元素

@bp.route('/jobs/<job_id>', methods=['GET', 'POST'])
def job_item(job_id):

    print('Redirect successful')
    return redirect(url_for('main.index'))

Answer 1

您可以使用带有 onclick 事件的 Javascript，该事件将传入元素的 id。

假设您使用的是 Jinja 模板，

行元素应该是

<tr class="text-center with-click" onclick="goToJob('job-{{ job.id }}')" id="job-{{ job.id }}" data-job-id="job-{{ job.id }}">

脚本函数应该是

function goToJob(strId) {
    job_id = parseInt(strId.split("-")[1]);
    alert(job_id);
}

您可以将警报操作替换为任何内容，在您的情况下可以使用对 /jobs/<job_id> 的 GET/POST 请求

可以添加一些样式以帮助改善用户体验

<style>
  tr.with-click:hover {
    background-color: yellow;
    cursor: pointer;
  }
</style>