栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

如何使表格中的整行都可单击作为链接?

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

如何使表格中的整行都可单击作为链接?

作者注一:

请查看下面的其他答案,尤其是那些不使用jquery的答案。

作者注二:

保留后代,但肯定在2019年采用了 错误的 方法。(在2017年甚至很糟糕)

您正在使用Bootstrap,这意味着您正在使用jQuery:^),因此一种实现方法是:

<tbody>    <tr  data-href='url://'>        <td>Blah Blah</td> <td>1234567</td> <td>£158,000</td>    </tr></tbody>jQuery(document).ready(function($) {    $(".clickable-row").click(function() {        window.location = $(this).data("href");    });});

当然,您不必使用href或切换位置,您可以在点击处理程序函数中执行任何操作。阅读有关

jQuery
如何编写处理程序的内容;

使用 类而 不是 id的 优点是可以将解决方案应用于多行:

<tbody>    <tr  data-href='url://link-for-first-row/'>        <td>Blah Blah</td> <td>1234567</td> <td>£158,000</td>    </tr>    <tr  data-href='url://some-other-link/'>        <td>More money</td> <td>1234567</td> <td>£800,000</td>    </tr></tbody>

而且您的代码库不会改变。相同的处理程序将处理所有行。

另外一个选项

您可以这样使用Bootstrap jQuery回调(在

document.ready
回调中):

$("#container").on('click-row.bs.table', function (e, row, $element) {    window.location = $element.data('href');});

这样做的好处是不会在表排序时重置(这与其他选项一起发生)。


注意

由于

window.document.location
已过时,因此已过时(或至少已弃用)
window.location



转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/614820.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号