在表格中创建整行“可链接” [英] Make a whole row in a table "link-able"

问题描述

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

I have this code where the whole div is clickable and link to different URLS

jsfiddle.net /＃& togetherjs = eBw8xooaHu

jsfiddle.net/#&togetherjs=eBw8xooaHu

我想让它在一个表中工作并使整行可以点击，所以我最终得到这样的结果......

I want to make it work in a table and make the whole row clickable so I ended up to smth like this..

jsfiddle。 net /＃& togetherjs = bKRMP3bSl3

jsfiddle.net/#&togetherjs=bKRMP3bSl3

这是可管理的还是我指向错误的方向？

Is this manageable or I am looking to the wrong direction?

推荐答案

我建议使用Jasny Bootstrap。

I recomend to use Jasny Bootstrap.

将Jasny添加到你的项目中的方法是相同的whit bootstrap。

The way to add Jasny to your project its the same whit bootstrap.

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

Before import the libraries adding the next lines:

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

之后将该类添加到您的表中：

after that add the class to your table:

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

和tbody标签

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

在第一个td标签上添加链接whit一个标签，td内容被推入标签。像这样：

on first td tag add the link whit a tag, td content pushed in to a tag. Like this:

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

如果您希望在td中显示无显示链接，则将该类添加到此td标记中： / p>

if you desire its no show link in a td, then add to this td tag the class:

<td class="rowlink-skip">

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

when, your row link its now working at 100%.

参考文献： Jasny Bootstrap

示例：示例

这篇关于在表格中创建整行“可链接”的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！