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

php javascript css html-table

2022-08-30 23:57:56

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

我想给每个.由于在表中我们只能添加数据，因此我无法实现这一目标。<a><tr><td>

有没有其他方法可以实现这一目标？

答案 1

网址：

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

或者使用 HTML 有效版本代替：data-hrefhref

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

答案 2

发挥@ahmet2016并保持其W3C标准。

网页：

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