我知道可以将整个表格单元格与CSS链接。
.tableClass td a{
display: block;
}
有没有办法将链接应用于整个表格行?
答案 0 :(得分:39)
我同意Matti。用一些简单的javascript很容易做到。一个快速的jquery示例是这样的:
<tr>
<td><a href="http://www.example.com/">example</a></td>
<td>another cell</td>
<td>one more</td>
</tr>
和
$('tr').click( function() {
window.location = $(this).find('a').attr('href');
}).hover( function() {
$(this).toggleClass('hover');
});
然后在你的CSS中
tr.hover {
cursor: pointer;
/* whatever other hover styles you want */
}
答案 1 :(得分:24)
不幸的是,没有。不是HTML和CSS。您需要a
元素来创建链接,并且不能将整个表格行包装在一个中。
您可以获得的最接近的是链接每个表格单元格。就个人而言,我只是链接一个单元格并使用JavaScript来使其余的可单击。为了清晰起见,最好至少有一个真正看起来像链接的单元格,下划线和所有单元格。
这是一个简单的jQuery代码段,可以使所有带有链接的表行都可以点击(它会查找第一个链接并“点击”它)
$("table").on("click", "tr", function(e) {
if ($(e.target).is("a,input")) // anything else you don't want to trigger the click
return;
location.href = $(this).find("a").attr("href");
});
答案 2 :(得分:19)
使用::before
伪元素。这样,只需要您不必处理Javascript或为每个单元格创建链接。使用以下table
结构
<table>
<tr>
<td><a href="http://domain.tld" class="rowlink">Cell</a></td>
<td>Cell</td>
<td>Cell</td>
</tr>
</table>
在这种情况下,我们所要做的就是在所需的链接(::before
)上使用.rowlink
创建一个跨越表格整个宽度的块元素。
table {
position: relative;
}
.rowlink::before {
content: "";
display: block;
position: absolute;
left: 0;
width: 100%;
height: 1.5em; /* don't forget to set the height! */
}
演示中的::before
以红色突出显示,以便您可以看到它正在做什么。
答案 3 :(得分:18)
示例:http://xxjjnn.com/linktablerow.html
关联整行:
<table>
<tr onclick="location.href='SomeWherrrreOverTheWebsiiiite.html'">**
<td> ...content... </td>
<td> ...content... </td>
...
</tr>
</table>
如果你想在整个行的鼠标悬停时做突出显示,那么:
<table class="nogap">
<tr class="lovelyrow" onclick="location.href='SomeWherrrreOverTheWebsiiiite.html'">**
...
</tr>
</table>
使用类似于以下内容的css,它将消除表格单元格之间的差距并更改悬停时的背景:
tr.lovelyrow{
background-color: hsl(0,0%,90%);
}
tr.lovelyrow:hover{
background-color: hsl(0,0%,40%);
cursor: pointer;
}
table.nogap{
border-collapse: collapse;
}
如果您使用的是Rails 3.0.9,那么您可能会发现此示例代码非常有用:
海有很多鱼,鱼有很多尺度,这里是app / view / fish / index.erb的片段
<table>
<% @fishies.each do |fish| %>
<tr onclick="location.href='<%= sea_fish_scales_path(@sea, fish) %>'">
<td><%= fish.title %></td>
</tr>
<% end %>
</table>
@fish和@sea的在app / controllers / seas_controller.rb中定义
答案 4 :(得分:9)
此外,它取决于您是否需要使用表元素。您可以使用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;}
答案 5 :(得分:6)
我觉得最简单的解决方案是没有javascript,只需将链接放在每个单元格中(前提是你的单元格之间没有大量的沟渠,或者真的认为边界线)。有你的css:
.tableClass td a{
display: block;
}
然后为每个单元格添加一个链接:
<table class="tableClass">
<tr>
<td><a href="#link">Link name</a></td>
<td><a href="#link">Link description</a></td>
<td><a href="#link">Link somthing else</a></td>
</tr>
</table>
无聊但很干净。
答案 6 :(得分:2)
要链接整行,您需要在行上定义onclick
函数,即<tr>
元素,并在hover
元素的CSS中定义鼠标tr
使鼠标指向Web中的典型点击手:
在表格中:
<tr onclick="location.href='http://www.google.com'">
<td>blah</td>
<td>blah</td>
<td><strong>Text</strong></td>
</tr>
在相关的CSS中:
tr:hover {
cursor: pointer;
}
答案 7 :(得分:0)
我认为这可能是最简单的解决方案:
<tr onclick="location.href='http://www.mywebsite.com'" style="cursor: pointer">
<td>...</td>
<td>...</td>
</tr>
cursor CSS属性设置光标的类型(如果有),以显示何时 鼠标指针悬停在元素上。
内联css定义该元素的光标将被格式化为pointer,因此您不需要“悬停”。