我使用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>
当前回答
下面的代码将使您的整个表可点击。单击本例中的链接将在警告对话框中显示该链接,而不是按照该链接进行操作。
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。
其他回答
下面的代码将使您的整个表可点击。单击本例中的链接将在警告对话框中显示该链接,而不是按照该链接进行操作。
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。
这里有一个通用的方法。定义这个css:
// css
td a.linker {
color:#212529;
display: block;
padding: 16px;
text-decoration: none;
}
然后把这个放在每个td里:
<td>
<a class="linker" href="www.google.com">
Cell content goes here
</a>
</td>
另一种选择使用<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');
});
你可以给行一个id,例如。
<tr id=“special”> ... </tr>
然后使用jquery说:
$(' #特别').onclick(函数(){窗口= " http://urltolinkto.com/x/y/z ";})
这里有一篇文章解释了如何在2020年做到这一点:https://www.robertcooper.me/table-row-links
这篇文章解释了3种可能的解决方案:
使用JavaScript。 用锚定元素包装所有表单元格。 使用<div>元素代替原生HTML表格元素,以使表格行为<a>元素。
本文深入讨论了如何实现每个解决方案(使用到codedependency的链接),还考虑了一些边缘情况,例如如何处理希望在表单元格中添加链接的情况(嵌套<a>元素不是有效的HTML,因此需要解决这个问题)。
正如@gameliela所指出的,找到一种不将整行作为链接的方法也是值得的,因为这将简化许多事情。然而,我确实认为,将整个表行作为一个链接来点击是一种很好的用户体验,因为用户可以方便地单击表上的任何位置来导航到相应的页面。