javascript - 如何将超链接添加到表格行

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>

JavaScript 使用 jQuery图书馆:

$(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 有效版本:

<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;
}