在表格中制作一整行“可链接”

Question

我有这段代码，其中整个 div 都可以点击并链接到不同的 URL

jsfiddle.net/#&togetherjs=eBw8xooaHu

我想让它在表格中工作并使整行可点击，所以我最终变成了这样......

jsfiddle.net/#&togetherjs=bKRMP3bSl3

这是可控的还是我正在寻找错误的方向？

Answer 1

我推荐使用 Jasny Bootstrap。

将 Jasny 添加到您的项目的方式与引导程序相同。

在导入库之前添加下一行：

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/3.1.3/css/jasny-bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/3.1.3/js/jasny-bootstrap.min.js"></script>

然后将类添加到您的表中：

<table class="table table-striped table-bordered table-hover">

和 tbody 标签

<tbody data-link="row" class="rowlink">

在第一个 td 标签上添加带有标签的链接，将 td 内容推送到标签中。像这样：

<td><a href="#inputmask">Input mask</a></td>

如果您希望它在 td 中不显示链接，则将类添加到此 td 标记：

<td class="rowlink-skip">

什么时候，你的行链接现在 100% 工作。

参考：Jasny Bootstrap

示例：Sample

Answer 2

您的小提琴链接不起作用，因此我不得不猜测。如果我希望表格行可点击，我会尝试使用 a-tag 而不是 tr 标签构建它并使用

table>a { display:table-row; }

为了它。

<table>
    <a href="">
        <td></td>
    </a>
</table>