Html 链接整个表格行？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4904938/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Link entire table row?
提问by santa
I know it is possible to link an entire table cell with CSS.
我知道可以用 CSS 链接整个表格单元格。
.tableClass td a{
display: block;
}
Is there a way to apply a link to an entire table row?
有没有办法将链接应用于整个表格行？
采纳答案by Jeff
I agree with Matti. Would be easy to do with some simple javascript. A quick jquery example would be something like this:
我同意马蒂。使用一些简单的 javascript 很容易做到。一个快速的 jquery 示例将是这样的：
<tr>
<td><a href="http://www.example.com/">example</a></td>
<td>another cell</td>
<td>one more</td>
</tr>
and
和
$('tr').click( function() {
window.location = $(this).find('a').attr('href');
}).hover( function() {
$(this).toggleClass('hover');
});
then in your CSS
然后在你的 CSS 中
tr.hover {
cursor: pointer;
/* whatever other hover styles you want */
}
回答by Elliott
Use the ::beforepseudo element. This way only you don't have to deal with Javascript or creating links for each cell. Using the following tablestructure
使用::before伪元素。这样，您就不必处理 Javascript 或为每个单元格创建链接。使用以下table结构
<table>
<tr>
<td><a href="http://domain.tld" class="rowlink">Cell</a></td>
<td>Cell</td>
<td>Cell</td>
</tr>
</table>
all we have to do is create a block element spanning the entire width of the table using ::beforeon the desired link (.rowlink) in this case.
在这种情况下，我们所要做的就是使用::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! */
}
The ::beforeis highlighted in red in the demo so you can see what it's doing.
在::before以红色在演示突出，所以你可以看到它在做什么。
回答by Matti Virkkunen
Unfortunately, no. Not with HTML and CSS. You need an aelement to make a link, and you can't wrap an entire table row in one.
抱歉不行。不适用于 HTML 和 CSS。您需要一个a元素来创建链接，并且您不能将整个表格行合二为一。
The closest you can get is linking every table cell. Personally I'd just link one cell and use JavaScript to make the rest clickable. It's good to have at least one cell that really looks like a link, underlined and all, for clarity anyways.
您可以获得的最接近的是链接每个表格单元格。就个人而言，我只链接一个单元格并使用 JavaScript 使其余单元格可点击。无论如何，为了清晰起见，最好至少有一个看起来像链接的单元格，加下划线等等。
Here's a simple jQuery snippet to make all table rows with links clickable (it looks for the first link and "clicks" it)
这是一个简单的 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");
});
回答by xxjjnn
Example: http://xxjjnn.com/linktablerow.html
示例：http: //xxjjnn.com/linktablerow.html
Link entire row:
链接整行：
<table>
<tr onclick="location.href='SomeWherrrreOverTheWebsiiiite.html'">**
<td> ...content... </td>
<td> ...content... </td>
...
</tr>
</table>
Iff you'd like to do highlight on mouseover for the entire row, then:
如果您想突出显示整行的鼠标悬停，那么：
<table class="nogap">
<tr class="lovelyrow" onclick="location.href='SomeWherrrreOverTheWebsiiiite.html'">**
...
</tr>
</table>
with something like the following for css, which will remove the gap between the table cells and change the background on hover:
使用类似于以下内容的 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;
}
Iff you are using Rails 3.0.9 then you might find this example code useful:
如果您使用的是 Rails 3.0.9，那么您可能会发现此示例代码很有用：
Sea has many Fish, Fish has many Scales, here is snippet of app/view/fish/index.erb
海有很多鱼，鱼有很多鳞，这是 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>
with @fishies and @sea are defined in app/controllers/seas_controller.rb
@fishies 和 @sea 在 app/controllers/seas_controller.rb 中定义
回答by Sidupac
Also it depends if you need to use a table element or not. You can imitate a table using CSS and make an A element the row
还取决于您是否需要使用表格元素。您可以使用 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:
css：
.table{display:table;}
.tr{display:table-row;}
.td{display:table-cell;}
.tr:hover{background-color:#ccc;}
回答by Jeffrey Jenkinson
I feel like the simplest solution is sans javascript and simply putting the link in each cell (provided you don't have massive gullies between your cells or really think border lines). Have your css:
我觉得最简单的解决方案是 sans javascript 并简单地将链接放在每个单元格中（前提是您的单元格之间没有大量的沟壑或真正考虑边界线）。有你的CSS：
.tableClass td a{
display: block;
}
and then add a link per cell:
然后为每个单元格添加一个链接：
<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>
boring but clean.
无聊但干净。
回答by Feri
To link the entire row, you need to define onclickfunction on your row, which is <tr>element and define a mouse hoverin the CSS for trelement to make the mouse pointer to a typical click-hand in web:
要链接整行，您需要在行上定义onclick函数，即<tr>element 并hover在 CSS for trelement 中定义鼠标，以使鼠标指针指向 web 中的典型点击手：
In table:
在表中：
<tr onclick="location.href='http://www.google.com'">
<td>blah</td>
<td>blah</td>
<td><strong>Text</strong></td>
</tr>
In related CSS:
在相关的 CSS 中：
tr:hover {
cursor: pointer;
}
回答by Paulo Belo
I think this might be the simplest solution:
我认为这可能是最简单的解决方案：
<tr onclick="location.href='http://www.mywebsite.com'" style="cursor: pointer">
<td>...</td>
<td>...</td>
</tr>
The cursor CSS property sets the type of cursor, if any, to show when the mouse pointer is over an element.
cursor CSS 属性设置光标的类型（如果有），以在鼠标指针悬停在元素上时显示。
The inline css defines that for that elementthe cursor will be formatted as a pointer, so you don't need the 'hover'.
内联 css 定义了该元素的光标将被格式化为指针，因此您不需要“悬停”。
