烧瓶 url_for html <tr>

Question

我有一个 websockets 应用程序，我在其中显示已连接的客户端。我前端用的是flask。

连接新客户端后，我将其添加到 python 中的 clients 列表中。

HTML 端，我有一个 table 通过 Jinja 接收客户端列表，它为每个连接的客户端创建一行。这个table用js每2秒刷新一次

我的客户列表是字典列表：

clients = [
    { 'cp_id':'Jhon',
      'last_heartbeat_from_now':datetime.utcnow()
    }
    ...
]

我的 table 是这样的：

<table id="clients">
    <tr>
        <th>Name</th>
        <th>Last time connected </th>
        <th>Health</th>
    </tr>
    {% for i in clients %}
    <tr>
        <td>{{ i['cp_id'] }}</td>
        <td>{{ i['last_heartbeat_from_now'] }}</td>
        <td><img src="{{ url_for('static', filename='green.png') }}" class="health"></td>
    </tr>
    {% endfor %}
</table>

我想让每一行 <tr> 都可以点击并重定向到带有此人姓名的动态 URL。例如，当我在 HTML 中单击 Jhon 时，我想创建动态 url ：localhost:5000/dashboard/Jhon.

我试过使用

<tr onclick="{{ url_for('dashboard', cp_id = i['cp_id']) }}">

但它什么也没做。我尝试制作数据 href:

<tr data-href="{{ url_for('dashboard', cp_id = i['cp_id']) }}">

但我不确定如何使用它。

最后，我的 python 路线部分代码是这样的：

@app.route('/dashboard/<string:cp_id>', methods=["GET", "POST"])
def dashboard(cp_id):
    return render_template('dashboard.html')

Answer 1

你快到了！

最好的方法是使用 data-href:

<tr data-href="{{ url_for('dashboard', cp_id = i['cp_id']) }}">

您的行是动态添加的，因此您的脚本需要委托事件。这意味着 onclick 事件需要来自静态父级（如果可以的话，离动态子级最近的一个，在这种情况下我使用文档）。

如果您不将事件从静态父级委托给动态子级，它将无法工作。例如：

jQuery("tr[data-href]").on("click", function () ...

这对你不起作用html。

委派事件处理程序将完成这项工作。

然后添加 jQuery 脚本：

<script type="text/javascript">
    jQuery(document).ready(function () {
        jQuery(document).on("click", "tr[data-href]", function() {
            window.location.href = jQuery(this).attr('data-href');
         });
    });
</script>

如果您想在悬停该行时添加 'hand' 效果，只需将其添加到您的 CSS:

[data-href] { cursor: pointer }

烧瓶 url_for html <tr>

Flask url_for for html <tr>

html

javascript

python

jinja2

flask