我正在使用Bootstrap,但以下操作无效:
<tbody>
<a href="#">
<tr>
<td>Blah Blah</td>
<td>1234567</td>
<td>£158,000</td>
</tr>
</a>
</tbody>
我正在使用Bootstrap,但以下操作无效:
<tbody>
<a href="#">
<tr>
<td>Blah Blah</td>
<td>1234567</td>
<td>£158,000</td>
</tr>
</a>
</tbody>
Answers:
请查看下面的其他答案,尤其是那些不使用jquery的答案。
保留后代,但肯定会在2020年采用错误的方法。
您正在使用Bootstrap,这意味着您正在使用jQuery:^),所以一种实现方法是:
<tbody>
<tr class='clickable-row' 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 class='clickable-row' data-href='url://link-for-first-row/'>
<td>Blah Blah</td> <td>1234567</td> <td>£158,000</td>
</tr>
<tr class='clickable-row' 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
。
href
在上使用属性tr
,因为它不是此元素的有效属性。使用数据属性代替:data-url="{linkurl}"
和在js代码中:$(this).data('url')
clickable_row
(CamelCase违反HTML标准,并且应使用小写字母(与此同时我在跨浏览器中遇到过几次问题)),然后jQuery是$('.clickable_row tr').click(function ...
But实际上,您应该使用它data-
来保存数据,而不是href
因为这是自定义数据的规范。data-url
和jquery会像$(this).data(url);
a
标签display: block;
有点烦人,但这似乎是解决此问题的最有用的方法。
你不能那样做。这是无效的HTML。您不能<a>
在a <tbody>
和a 之间插入a <tr>
。尝试以下方法:
<tr onclick="window.location='#';">
...
</tr>
为指针视图添加样式
[data-href] { cursor: pointer; }
完成此工作后,您想使用JavaScript在HTML之外分配点击处理程序。
<a>
在被单击的行中查找第一个。(这也会正常降级)
onClick={() => window.open('https://stackoverflow.com/', '_blank')}
您可以在每个中添加一个锚点<td>
,如下所示:
<tr>
<td><a href="#">Blah Blah</a></td>
<td><a href="#">1234567</a></td>
<td><a href="#">more text</a></td>
</tr>
然后,您可以display:block;
在锚点上使用以使整行都可单击。
tr:hover {
background: red;
}
td a {
display: block;
border: 1px solid black;
padding: 16px;
}
除非您使用JavaScript,否则这可能与获得最佳效果差不多。
tabindex="-1"
了第一个<td>
链接之外的所有内容上,因此用户逐行制表,而不是单元格制表。另外,如果要使用:focus-within
CSS伪类,仍可以突出显示/概述整个行。
链接表行是可能的,但标准<table>
元素不行。您可以使用display: table
样式属性来完成。这里和这里有一些小提琴来演示。
这段代码可以解决这个问题:
.table {
display: table;
}
.row {
display: table-row;
}
.cell {
display: table-cell;
padding: 10px;
}
.row:hover {
background-color: #cccccc;
}
.cell:hover {
background-color: #e5e5e5;
}
<link href="https://stackpath.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" />
<div role="grid" class="table">
<div role="row" class="row">
<div role="gridcell" class="cell">
1.1
</div>
<div role="gridcell" class="cell">
1.2
</div>
<div role="gridcell" class="cell">
1.3
</div>
</div>
<a role="row" class="row" href="#">
<div role="gridcell" class="cell">
2.1
</div>
<div role="gridcell" class="cell">
2.2
</div>
<div role="gridcell" class="cell">
2.3
</div>
</a>
</div>
请注意,由于<table>
未使用标准元素,因此需要ARIA角色来确保适当的可访问性。您可能需要添加其他角色(如role="columnheader"
适用)。在此处的指南中找到更多信息。
/
Firefox中的键),导航(tab
键),复制链接位置,在新标签页/窗口中打开等,即使对于可访问的/特殊的需要浏览器。我唯一的挑剔是我不会<div>
在内嵌套一个<a>
,因此最好将单元格标记为<span>
。
_tables.scss
和其他一些随机的片段,用我选择使用的CSS类替换了所有出现的表元素(与元素完全相同:th
→ .th
),与好处相比,实际上没有多少工作。
<table>
是有原因的。但这仍然胜过任何JavaScript解决方案:)
使用标准Bootstrap 4.3+如下实现-无需jQuery或任何额外的CSS类!
关键是要stretched-link
在单元格内的文本上使用并定义<tr>
为包含块。
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table table-hover">
<tbody>
<tr style="transform: rotate(0);">
<th scope="row"><a href="#" class="stretched-link">1</a></th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
您可以用不同的方式定义包含块,例如设置transform
为不值(如上例所示)。
欲了解更多信息,请阅读这里的引导文件的stretched-link
。
scope="row"
为了什么?我不使用范围,并且该行仍然表现为链接。
scope="row"
-如果您想查看其他内容,请查看历史记录。不过,我没有还原编辑,因为代码片段似乎可以正常工作(与原始代码一样),并且我没有机会详尽地测试新代码:-)
tr
没有被公认的规则浏览器之间的包含块...标签stackoverflow.com/questions/61342248/...
更加灵活的解决方案是使用data-href属性来定位任何对象。这是您可以轻松地在不同地方重用代码。
<tbody>
<tr data-href="https://google.com">
<td>Col 1</td>
<td>Col 2</td>
</tr>
</tbody>
然后在jQuery中,只需将具有该属性的任何元素作为目标即可:
jQuery(document).ready(function($) {
$('*[data-href]').on('click', function() {
window.location = $(this).data("href");
});
});
并且不要忘记为CSS设计样式:
[data-href] {
cursor: pointer;
}
现在,您可以将data-href属性添加到任何元素,它将起作用。当我像这样编写代码片段时,我喜欢它们要灵活一些。如果有的话,随时添加一个普通的js解决方案。
您可以使用以下引导程序组件:
http://jasny.github.io/bootstrap/javascript/#rowlink
您最喜欢的前端框架缺少的组件。
<table class="table table-striped table-bordered table-hover">
<thead>
<tr><th>Name</th><th>Description</th><th>Actions</th></tr>
</thead>
<tbody data-link="row" class="rowlink">
<tr><td><a href="#inputmask">Input mask</a></td><td>Input masks can be used to force the user to enter data conform a specific format.</td><td class="rowlink-skip"><a href="#">Action</a></td></tr>
<tr><td><a href="http://www.jasny.net/" target="_blank">jasny.net</a></td><td>Shared knowledge of Arnold Daniels aka Jasny.</td><td class="rowlink-skip"><a href="#">Action</a></td></tr>
<tr><td><a href="#rowlinkModal" data-toggle="modal">Launch modal</a></td><td>Toggle a modal via JavaScript by clicking this row.</td><td class="rowlink-skip"><a href="#">Action</a></td></tr>
</tbody>
</table>
将类.rowlink
和属性添加data-link="row"
到<table>
或<tbody>
元素。对于其他选项,请将该名称附加到data-,例如,data-target="a.mainlink"
可以通过将.rowlink-skip
类添加到来排除单元格<td>
。
通过javascript调用输入掩码:
$('tbody.rowlink').rowlink()
从技术上讲,有一个不错的方法是使用<a>
标记里面的<tr>
,这在语义上可能是不正确的(可能会向您发出浏览器警告),但是不需要JavaScript/jQuery
使用:
<!-- HTML -->
<tbody>
<tr class="bs-table-row">
<td>Blah Blah</td>
<td>1234567</td>
<td>£158,000</td>
<a class="bs-row-link" href="/your-link-here"></a>
</tr>
</tbody>
/* CSS */
.bs-table-row {
position: 'relative';
}
.bs-row-link {
position: 'absolute';
left: 0;
height: '36px'; // or different row height based on your requirements
width: '100%';
cursor: 'pointer';
}
PS:请注意,这里的窍门是将<a>
标签放在最后一个元素上,否则它将尝试占用第一个元素的空间<td>
单元格。
PPS:现在您的整个行都是可单击的,您也可以使用此链接在新标签页中打开(Ctrl / CMD +单击)
<tr>
元素不能将<a>
元素作为子元素。只有<td>
和<th>
是有效的孩子。参见:stackoverflow.com/questions/12634715/…–
您可以在tr中使用onclick javascript方法并使其可单击,如果由于某些细节而需要构建链接,则可以在javascript中声明一个函数并在onclick中调用它,并传递一些值。
这是通过在表行上放置透明A元素的方法。优点是:
缺点:
该表保持原样:
<table id="tab1">
<tbody>
<tr>
<td>Blah Blah</td>
<td>1234567</td>
<td>£158,000</td>
</tr>
</tbody>
</table>
通过在每个第一列中插入A元素并设置所需的属性,通过jQuery JavaScript添加链接(针对每一行):
// v1, fixed for IE and Chrome
// v0, worked on Firefox only
// width needed for adjusting the width of the A element
var mywidth=$('#tab1').width();
$('#tab1 tbody>tr>td:nth-child(1)').each(function(index){
$(this).css('position', 'relative');// debug: .css('background-color', '#f11');
// insert the <A> element
var myA=$('<A>');
$(this).append(myA);
var myheight=$(this).height();
myA.css({//"border":'1px solid #2dd', border for debug only
'display': 'block',
'left': '0',
'top': '0',
'position': 'absolute'
})
.attr('href','the link here')
.width(mywidth)
.height(myheight)
;
});
如果使用许多填充和边距,则宽度和高度设置可能会比较棘手,但通常,关闭几个像素甚至都不会造成影响。
现场演示:http : //jsfiddle.net/qo0dx0oo/(在Firefox中有效,但在IE或Chrome中不起作用,因此该链接的位置不正确)
已修复,适用于Chrome和IE(也适用于FF):http : //jsfiddle.net/qo0dx0oo/2/
onmouseover
您可以将按钮角色添加到表行,并且Bootstrap将更改光标,而无需进行任何CSS更改。我决定使用该角色作为一种方法,只需很少的代码即可轻松使任何行都可单击。
HTML
<table class="table table-striped table-hover">
<tbody>
<tr role="button" data-href="#">
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
</tbody>
</table>
jQuery的
$(function(){
$(".table").on("click", "tr[role=\"button\"]", function (e) {
window.location = $(this).data("href");
});
});
您可以应用相同的原理将按钮角色添加到任何标签。
下面的代码将使您的整个表都可单击。单击本示例中的链接将在警报对话框中显示该链接,而不是跟随该链接。
HTML:
以下是上面示例的HTML:
<table id="example">
<tr>
<th> </th>
<th>Name</th>
<th>Description</th>
<th>Price</th>
</tr>
<tr>
<td><a href="apples">Edit</a></td>
<td>Apples</td>
<td>Blah blah blah blah</td>
<td>10.23</td>
</tr>
<tr>
<td><a href="bananas">Edit</a></td>
<td>Bananas</td>
<td>Blah blah blah blah</td>
<td>11.45</td>
</tr>
<tr>
<td><a href="oranges">Edit</a></td>
<td>Oranges</td>
<td>Blah blah blah blah</td>
<td>12.56</td>
</tr>
</table>
CSS
和CSS:
table#example {
border-collapse: collapse;
}
#example tr {
background-color: #eee;
border-top: 1px solid #fff;
}
#example tr:hover {
background-color: #ccc;
}
#example th {
background-color: #fff;
}
#example th, #example td {
padding: 3px 5px;
}
#example td:hover {
cursor: pointer;
}
jQuery的
最后是使魔术实现的jQuery:
$(document).ready(function() {
$('#example tr').click(function() {
var href = $(this).find("a").attr("href");
if(href) {
window.location = href;
}
});
});
它的作用是当单击一行时,将搜索属于锚点的href。如果找到一个,则将窗口的位置设置为该href。
在我看来,一个非常简单的选择就是使用单击,并且更正确,因为这将视图和控制器分开了,并且您无需对URL进行硬编码,也无需通过单击来完成其他操作。它也可以与Angular ng-click一起使用。
<table>
<tr onclick="myFunction(this)">
<td>Click to show rowIndex</td>
</tr>
</table>
<script>
function myFunction(x) {
alert("Row index is: " + x.rowIndex);
}
</script>
例子在这里工作
另一种选择是使用<a>
CSS位置和一些jQuery或JS的:
HTML:
<table>
<tr>
<td>
<span>1</span>
<a href="#" class="rowLink"></a>
</td>
<td><span>2</span></td>
</tr>
</table>
CSS:
table tr td:first-child {
position: relative;
}
a.rowLink {
position: absolute;
top: 0; left: 0;
height: 30px;
}
a.rowLink:hover {
background-color: #0679a6;
opacity: 0.1;
}
然后,您需要使用例如jQuery的宽度:
$(function () {
var $table = $('table');
$links = $table.find('a.rowLink');
$(window).resize(function () {
$links.width($table.width());
});
$(window).trigger('resize');
});
我知道有人已经写了差不多相同的东西,但是我的方法是正确的方法(div不能是A的子级),并且最好使用类。
您可以使用CSS模仿表格并将A元素设为行
<div class="table" style="width:100%;">
<a href="#" class="tr">
<span class="td">
cell 1
</span>
<span class="td">
cell 2
</span>
</a>
</div>
CSS:
.table{display:table;}
.tr{display:table-row;}
.td{display:table-cell;}
.tr:hover{background-color:#ccc;}
我更喜欢使用onclick=""
属性,因为对于新手来说,它易于使用和理解
<tr onclick="window.location='any-page.php'">
<td>UserName</td>
<td>Email</td>
<td>Address</td>
</tr>
可以接受的答案很好,但是如果您不想在每个tr上重复网址,我建议使用一个小的替代方法。因此,您将url或href放在表的data-url中,而不是tr中。
<table data-click data-url="href://blah">
<tbody>
<tr id ="2">
<td>Blah Blah</td> <td>1234567</td> <td>£158,000</td>
</tr>
<tr id ="3">
<td>Blah Blah</td> <td>1234567</td> <td>£158,000</td>
</tr>
</tbody>
</table
jQuery(document).ready(function($) {
$('[data-click] tbody tr').click(function() {
var url = $(this).closest('table').data("url");
var id = $(this).closest('tr').attr('id');
window.location = url+"?id="+id);
});
});
这也很好,因为您也不需要向每个tr添加click data属性。另一个好处是,我们不使用类来触发点击,因为类仅应真正用于样式设置。
前面未提到的一种解决方案是在单元格中使用单个链接,并使用一些CSS在单元格上扩展此链接:
table {
border: 1px solid;
width: 400px;
overflow: hidden;
}
tr:hover {
background: gray;
}
tr td {
border: 1px solid;
}
tr td:first-child {
position:relative;
}
a:before {
content: '';
position:absolute;
left: 0;
top: 0;
bottom: 0;
display: block;
width: 400px;
}
<table>
<tr>
<td><a href="https://google.com">First column</a></td>
<td>Second column</td>
<td>Third column</td>
</tr>
<tr>
<td><a href="https://stackoverflow.com">First column</a></td>
<td>Second column</td>
<td>Third column</td>
</tr>
</table>
<tbody>
<tr data-href='www.bbc.co.uk'>
<td>Blah Blah</td>
<td>1234567</td>
<td>£158,000</td>
</tr>
<tr data-href='www.google.com'>
<td>Blah Blah</td>
<td>1234567</td>
<td>£158,000</td>
</tr>
</tbody>
<script>
jQuery(document).ready(function ($) {
$('[data-href]').click(function () {
window.location = $(this).data("href");
});
});
</script>
尽管这里的主要解决方案很棒,但是我的解决方案消除了对类的需求。您需要做的就是添加带有URL的data-href属性。
我花了很多时间试图解决这个问题。
有3种方法:
使用JavaScript。明显的缺点:无法在本地打开新选项卡,并且将鼠标悬停在行上时,状态栏上将不会像常规链接一样显示任何指示。可访问性也是一个问题。
仅使用HTML / CSS。这意味着将<a>
每个嵌套在下面<td>
。像这样的小提琴这种简单的方法是行不通的-因为每个列的可点击表面不一定相等。这是一个严重的用户体验问题。另外,如果您需要<button>
在行上使用,则将其嵌套在<a>
标记下的HTML无效(尽管浏览器可以接受)。
我发现了三种其他方法可以实现这种方法。首先还可以,其他两个都不是很好。
a)看一下这个例子:
tr {
height: 0;
}
td {
height: 0;
padding: 0;
}
/* A hack to overcome differences between Chrome and Firefox */
@-moz-document url-prefix() {
td {
height: 100%;
}
}
a {
display: block;
height: 100%;
}
它可以工作,但是由于Chrome和Firefox之间的不一致,因此需要针对特定浏览器的破解来克服差异。此外,Chrome始终会将单元格内容对齐到顶部,这可能会导致长文本出现问题,尤其是在涉及行高变化的情况下。
b)设定<td>
为{ display: contents; }
。这导致另外两个问题:
b1。如果其他人尝试直接设置<td>
代码的样式(例如将其设置为){ width: 20px; }
,则需要以某种方式将该样式传递给<a>
标签。我们需要一些魔术来做到这一点,这可能比Javascript替代方法中的魔术更多。
b2。 { display: contents; }
仍在实验中;特别是Edge不支持它。
c)设定<td>
为{ height: --some-fixed-value; }
。这只是不够灵活。
我建议认真考虑的最后一种方法是根本不使用可点击的行。可点击的行并不是很棒的UX体验:要在视觉上将它们标记为可点击并不容易,并且当行中的多个部分(例如按钮)都可点击时,会带来挑战。因此,可行的选择是<a>
只在第一列上显示一个标签,将其显示为常规链接,并赋予其导航整行的作用。
这是另一种方式
HTML:
<table>
<tbody>
<tr class='clickableRow'>
<td>Blah Blah</td>
<td>1234567</td>
<td>£158,000</td>
</tr>
</tbody>
</table>
jQuery:
$(function() {
$(".clickableRow").on("click", function() {
location.href="http://google.com";
});
});
您可以为该行指定一个ID,例如
<tr id="special"> ... </tr>
然后使用jquery进行类似以下操作:
$('#special').onclick(function(){ window="http://urltolinkto.com/x/y/z";})
为什么我们不使用“ div”标签呢?
<div>
<a href="" > <div> Table row of content here.. </div> </a>
</div>