链接整个表格行？

Question

我知道可以使用 CSS 来链接整个表格单元格。

.tableClass td a{
   display: block;
}

有没有办法将链接应用到整个表格行？

- santa

Answer 1

我同意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 */
}

- Jeff

---

这可能对我有用，但需要点击才能生效。它是否也可以在鼠标悬停时像链接一样工作？谢谢。 - santa

当然，我可能会在悬停时添加一个类，并在该类中添加所需的样式。我将在我的帖子中更新一个示例。 - Jeff

这个解决方案存在很多问题。例如，您无法右键单击“其他”表格单元格并选择“复制链接”、“在新标签页中打开”或其他操作。此外，您也无法通过按住Shift键/Control键/Command键并单击该行来使其在新标签页中打开，因为点击事件将仍然被触发，并会导致当前标签页和新标签页都导航到目标页面。 - scy

这个解决方案对我非常有效，特别是在移动设备上，不需要Scytale提到的“shift-click”的任何缺点。 - Sterling Bourne

这里有一个只需要HTML和CSS的解决方案。希望能帮到你。 - Trevin Avery

Answer 2

使用::before伪元素。这样，您就不必处理JavaScript或为每个单元格创建链接。使用以下table结构。

<table>
  <tr>
    <td><a href="http://domain.tld" class="rowlink">Cell</a></td>
    <td>Cell</td>
    <td>Cell</td>
  </tr>
</table>

我们需要做的就是在所需的链接（在本例中为.rowlink）上使用::before，创建一个横跨整个表格宽度的块元素。

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以红色突出显示，这样你就可以看到它的作用了。

- Elliott

---

这是比之前所有的解决方案都更干净的解决方案。好奇: 你会如何针对具有padding-top的td进行调整？ - eirikir

@eirikir 在 .rowlink::before 中添加一个负的 margin-top，值等于 td 的 padding-top 对我有用。 - jzzocc

非常棒的东西，迄今为止我见过的最佳解决方案。 - logos

看起来非常不错。最好不要依赖JavaScript！但有一个注意点：从标记的角度来看，其他单元格的内容不在锚点中。这可能会影响某些情况下的可用性（以及SEO）。并且它在非CSS代理中无法工作。 - Marten Koetsier

Answer 3

很遗憾，使用HTML和CSS是不可能的。您需要一个元素来创建链接，而且您不能将整个表格行包装在其中。

最接近的方法是链接每个单元格。个人建议只连接一个单元格，并使用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");
});

- Matti Virkkunen

---

@Aliester：使用JS方法时不应该有间隙...据我所知。而且，现在谁还会在单元格之间留空间呢？ - Matti Virkkunen

感谢您的指正，我错过了您正在针对表格行的单击事件。 - Adrian

对于大量元素，例如 tr，使用 delegate 比使用 live 更高效。 - Yi Jiang

@Yi Jiang：你确定吗...？据我所知，live只是在文档级别上附加一个事件处理程序，然后处理所有事情。现在，如果你有很多处理程序，live可能会变得低效，因为它们将为该类型的所有事件处理程序进行处理，但元素的数量不应该有任何影响。 - Matti Virkkunen

实际上，如果我点击不同的单元格，它就像一个链接一样工作，但只是刷新了同一页。另外，是否可能使其看起来像一个链接？也许将cursor: pointer添加到所有TD中？ - santa

@MattiVirkkunen 是的，你说得对，元素的数量并不重要，那是我的错误，但DOM结构的复杂性在这里确实很重要，因为所有事件都必须通过整个文档树冒泡到达根元素，而delegate附加到table元素上，事件只需要通过一个元素冒泡即可。 - Yi Jiang

Answer 4

示例: 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代码，可以消除表格单元格之间的间隙并在鼠标悬停时改变背景色：

```css table { border-collapse: collapse; }

td { background-color: #ffffff; }

td:hover { background-color: #cccccc; } ```

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>

@fishies和@sea在app/controllers/seas_controller.rb中定义。

- xxjjnn

---

这个问题与Rails无关，您的回答中相关部分也不依赖于它。 - kbanman

请尽量避免使用onclick和其他on*属性，它们是不良的编码风格，因为它们破坏了标记和逻辑之间的分离。 - scy

onclick存在的问题是它无法与“在新选项卡中打开”一起使用。 - Sergey Kandaurov

:hover 可以省略，或者你甚至可以内联样式，例如 <tr style="cursor:pointer" onclick="location.href='url'">。 - Aaron Blenkush

Answer 5

还要看你是否需要使用表格元素。你可以使用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>

样式表：

.table{display:table;}
.tr{display:table-row;}
.td{display:table-cell;}
.tr:hover{background-color:#ccc;}

- Sidupac

---

很好的创新思维。OP并没有明确要求表格的语义。然而，这不是真正表格数据的解决方案。 - Marten Koetsier

该解决方案缺少 aria-roles，这会告诉浏览器什么是什么（这是一个表格，这是一行，这是一列），因此理论上您可以获得最佳的响应性和表格处理效果。 - Kalnode

@Kalnode 很不幸，<a> 不能同时具有 role="row" 和 href。w3c 验证器会报错。 - user8977154

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

枯燥但干净。

- Jeffrey Jenkinson

Answer 7

要将整行连接起来，您需要在行上定义onclick功能，该功能位于<tr>元素中，并为tr元素在CSS中定义鼠标hover，使鼠标指针成为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;
}

- Feri

Answer 8

我认为这可能是最简单的解决方案：

<tr onclick="location.href='http://www.mywebsite.com'" style="cursor: pointer">
<td>...</td>
<td>...</td>
</tr>

当鼠标指针悬停在元素上方时，光标CSS属性设置要显示的光标类型（如果有）。

内联css定义了对于该元素来说，光标将被格式化为pointer，因此您不需要“hover”。

- Paulo Belo