使用 JQuery 让表格的整行可点击跳转

我们在展示数据的时候,有时候会想让用户点击表格的整列然后进行跳转。在 tr 标签上直接加 a 标签是不符合规范的做法,且会影响样式。还有一种方式是在每个 td 上都加上 a 标签,这样又显得很臃肿。最好的方法是用 JS 实现。

1. 给需要点击跳转的 tr 加上一个独特的标示

比如给 tr 标签设定一个 row-click-able 类;并且加上 data-href 属性,属性的值就是你想要跳转到的目的页面。

[code lang=”html”]
<tbody>
<tr class="row-click-able" data-href="http://bitzhi.com">
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
[/code]

2. 写一个简单的 JS 跳转

这里我是用 JQuery。给有 row-click-able 类的节点加上点击事件,点击的目的页面是 data-href 属性的值。

[code lang=”js”]
$(document).ready(function($) {
$(".row-click-able").click(function() {
window.document.location = $(this).data("href");
});
});
[/code]

3. 写一点样式

为了让用户能知道这一列可以点击,我们最好将鼠标悬停的样式设置为 pointer (就是那个手型)。

[code lang=”css”]
.row-click-able { cursor: pointer; }
[/code]

至此,完工。实际上,可以更通用一点,任何想要实现点击跳转的元素都可以这样实现,这样你的类名应该会写成 click-able 🙂

《使用 JQuery 让表格的整行可点击跳转》上有2条评论

  1. 为什么我写了没有效果

    100152
    EFSEDFRF
    2016-06-13 12:23

    $(document).ready(function($){
    $(“.tr”).click(function(){
    window.document.location = $(this).data(“orderDetail.html”);
    });
    });

发表评论

电子邮件地址不会被公开。 必填项已用*标注