如何向表行<tr>添加超链接

Question

我有一个表,其表行在<tr>循环中生成,以形成多行.

我想给<a>每个人单独的链接<tr>.由于在表中我们只能添加添加数据<td>,我无法实现.

有没有其他方法来实现这一目标？专家请帮忙.

Answer 1

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 :

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

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

CSS(可选):

table tr {
    cursor: pointer;
}

或者HTML有效版本data-href代替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;
}

Answer 2

玩@ ahmet2016并保持W3C标准.

HTML:

<tr data-href='LINK GOES HERE'>
    <td>HappyDays.com</td>
</tr>

CSS:

*[data-href] {
    cursor: pointer;
}

jQuery的:

$(function(){       
    $('*[data-href]').click(function(){
        window.location = $(this).data('href');
        return false;
    });
});

Answer 3

我发现将表格行转换为链接的最简单方法是使用带有window.location的onclick属性.

<table>
<tr onclick="window.location='/just/a/link.html'">
<td></td>
</tr>
</table>