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

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

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

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

<tbody>
    <tr class="row-click-able" data-href="https://bitzhi.com">
        <td></td>
        <td></td>
        <td></td>
    </tr>
</tbody>

2. 写一个简单的 JS 跳转

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

$(document).ready(function($) {
    $(".row-click-able").click(function() {
        window.document.location = $(this).data("href");
    });
});

3. 写一点样式

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

.row-click-able { cursor: pointer; }

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

2 条评论

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

    100152
    EFSEDFRF
    2016-06-13 12:23

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

发表评论

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