如何将超链接添加到表行< tr> [英] How to add hyperlink to table row <tr>

问题描述

我有一张表，其表行< tr> 循环生成以形成多行.

I am having a table with its table row <tr> generating in a loop to form multiple rows.

我想给每个< tr> 提供单独的< a> 链接.由于在表中我们只能将添加数据添加到< td> 中，因此我无法实现.

I want to give separate <a> link to each <tr>. Since in table we can add only add data to <td> only, I am not able to achieve that.

还有其他方法可以实现这一目标吗?

Is there any other way to achieve this?

推荐答案

HTML:

<table>
    <tr href="http://myspace.com">
      <td>MySpace</td>
    </tr>
    <tr href="http://apple.com">
      <td>Apple</td>
    </tr>
    <tr href="http://google.com">
      <td>Google</td>
    </tr>
</table>

使用 jQuery 库的JavaScript:

JavaScript using jQuery Library:

$(document).ready(function(){
    $('table tr').click(function(){
        window.location = $(this).attr('href');
        return false;
    });
});

您可以在这里尝试: http://jsbin.com/ikada3

CSS(可选):

table tr {
    cursor: pointer;
}

用 data-href 代替 href 或HTML有效版本:

OR the HTML valid version with data-href instead of href:

<table>
    <tr data-href="http://myspace.com">
      <td>MySpace</td>
    </tr>
    <tr data-href="http://apple.com">
      <td>Apple</td>
    </tr>
    <tr data-href="http://google.com">
      <td>Google</td>
    </tr>
</table>

JS:

$(document).ready(function(){
    $('table tr').click(function(){
        window.location = $(this).data('href');
        return false;
    });
});

CSS:

table tr[data-href] {
    cursor: pointer;
}

这篇关于如何将超链接添加到表行< tr>的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！