如何将表tr变成链接？

发布于 2024-11-28 04:40:33 字数 844 浏览 0 评论 0原文

这是我当前的解决方案：

<tr onclick="window.location = '/info/{{ match.login.id }}/'">
    <td>{% if match.image %}<img src="{{ match.image|crop:'64x64' }}" alt="Match Avatar" />{% endif %}</td>
    <td>{{ match.team_name }}</td>
    <td>{{ model|distance_to:match }} {{ model.display_distance }}</td>
    <td>{% for expertise in match.expertise_list %}
            <span{% if expertise in model.expertise_list %} class="match"{% endif %}>{{ expertise }}</span><br />
    {% endfor %}</td>
    <td>{% if model|active_connection_with:match %}{{ model|status_with:match }}{% else %}<a href="javascript:connect({{ match.login.id }})" class="button">Connect</a>{% endif %}</td>

但问题是我希望能够右键单击并复制链接等。我该如何实现这一点？

原文

Here is my current solution:

<tr onclick="window.location = '/info/{{ match.login.id }}/'">
    <td>{% if match.image %}<img src="{{ match.image|crop:'64x64' }}" alt="Match Avatar" />{% endif %}</td>
    <td>{{ match.team_name }}</td>
    <td>{{ model|distance_to:match }} {{ model.display_distance }}</td>
    <td>{% for expertise in match.expertise_list %}
            <span{% if expertise in model.expertise_list %} class="match"{% endif %}>{{ expertise }}</span><br />
    {% endfor %}</td>
    <td>{% if model|active_connection_with:match %}{{ model|status_with:match }}{% else %}<a href="javascript:connect({{ match.login.id }})" class="button">Connect</a>{% endif %}</td>

But the thing that is wrong with this is that I want to be able to right click and copy link etc. How can i accomplish this?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

划一舟意中人 2024-12-05 04:40:33

右键单击复制链接仅适用于 A 标记。您必须编写自己的右键单击处理程序。

回复收藏 0 原文

空袭的梦i 2024-12-05 04:40:33

当表元素（tr、td、th）之间有 HTML 元素时，它是无效标记（并且在浏览器上不起作用）。

如果您的表格单元格太复杂而无法标记为链接，您可以做的是使用一个不可见的元素来覆盖您想要的每个想要链接：

<table>
    <tr>
        <td>
            <a href="http://google.com" class="overlay"></a>
            Google
        </td>
        <td>
            <a href="http://yahoo.com" class="overlay"></a>
            Yahoo
        </td>
    </tr>

</table>

td {
    position: relative;
}

.overlay {
    background-color: transparent;
    position: absolute;
    width: 100%;
    height: 100%;

}

演示：http://jsfiddle.net/waitinforatrain/puTbj/1/

唯一的缺点是用户无法选择其下方的文本。

It's invalid markup (and doesn't work on browsers) when you have HTML elements between table elements (tr, td, th).

If your table cells are too complicated to mark up as a link, what you can do is have an invisible <a> element that covers each <td> that you want to link:

<table>
    <tr>
        <td>
            <a href="http://google.com" class="overlay"></a>
            Google
        </td>
        <td>
            <a href="http://yahoo.com" class="overlay"></a>
            Yahoo
        </td>
    </tr>

</table>

td {
    position: relative;
}

.overlay {
    background-color: transparent;
    position: absolute;
    width: 100%;
    height: 100%;

}

Demo: http://jsfiddle.net/waitinforatrain/puTbj/1/

The only downside is that users can't select the text under it.

回复收藏 0 原文

~没有更多了~