开发者

How to make a table tr into a link?

Here is my current solution:

<tr onclick="window.location = '/info/{{ match.lo开发者_如何学Pythongin.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?


Right-click to copy a link only works on the A tag. You'd have to write your own right-click hander.


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

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜