链接整个表格行？ [复制]

Posted 2023-03-05

【中文标题】链接整个表格行？ [复制]

【英文标题】：Link entire table row? [duplicate]

【发布时间】：2011-06-21 18:06:32

【问题描述】：

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

.tableClass td a
   display: block;

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

【参考方案1】：

很遗憾，没有。不是 html 和 CSS。您需要一个 a 元素来创建链接，并且您不能将整个表格行包装在一个中。

您可以获得的最接近的方法是链接每个表格单元格。就我个人而言，我只会链接一个单元格并使用 javascript 使其余部分可点击。为了清晰起见，最好至少有一个看起来像链接的单元格，加上下划线等等。

这是一个简单的 jQuery sn-p 让所有带有链接的表格行都可以点击（它会查找第一个链接并“点击”它）

$("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");
);

【讨论】：

@Aliester：使用 JS 方法应该没有间隙...... AFAIK。再说了，现在谁在细胞之间有空间呢

确认您错过了您正在关闭表格行的点击事件。 （=

对于大量元素，例如tr，delegate 比使用live 效率更高

@蒋毅：你确定……？ AFAIK live 只是将一个事件处理程序附加到文档级别并处理所有事情。现在，如果您有很多 处理程序，live 可能会变得低效，因为它们基本上都会针对该类型的所有事件进行处理，但元素的数量应该没有区别。跨度>

确实，如果我单击不同的单元格，它就像一个链接一样工作，但只是刷新了同一页面。另外，是否也可以使它看起来像一个链接？也许添加一个游标：指向所有 TD 的指针？

【参考方案2】：

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

【讨论】：

它可能对我有用，但它是点击。它也可以像悬停时的链接一样吗？谢谢。

当然，我可能会在悬停时添加一个类，并在该类中添加您想要的任何样式。我会用一个例子更新我的帖子。

这个方案有很多问题。例如，您不能右键单击任何“其他”表格单元格并选择“复制链接”、“在新选项卡中打开”或其他任何内容。此外，您不能 shift-click/control-click/command-click 行使其在新选项卡中打开，因为 click 事件仍然会触发并导致 both 当前 和导航到目标页面的新标签。

该解决方案非常适合我，尤其是在移动设备上，它不需要 Scytale 提到的任何“shift-click”缺点。

Here is a solution that only needs HTML and CSS. 希望对您有所帮助。

【参考方案3】：

示例：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的sn-p

<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 中定义

【讨论】：

该问题与rails无关，您答案的相关部分不依赖于它。

请尽量避免 onclick 和其他 on* 属性，它们是不好的样式，因为它们破坏了标记和逻辑之间的分离。

onclick 的问题是它不适用于“在新标签页中打开”

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

【参考方案4】：

我觉得最简单的解决方案是不使用 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>

无聊但干净。

【参考方案5】：

使用::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! */

demo

::before 在演示中以红色突出显示，因此您可以看到它在做什么。

【讨论】：

这是一个比上述所有解决方案都干净得多的解决方案。好奇：你会如何为td 和padding-top 调整这个？

@eirikir 将负数 margin-top 添加到 .rowlink::before 等于 td 的 padding-top 对我有用。

好东西，迄今为止我见过的最好的解决方案。

看起来很不错。最好不要依赖javascript！一个警告：从标记的角度来看，其他单元格的内容不在锚点中。在某些情况下，这可能会影响可用性（可能还有 SEO）。而且它在非 CSS 代理中不起作用。

【参考方案6】：

还取决于您是否需要使用表格元素。您可以使用 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:

.tabledisplay:table;
.trdisplay:table-row;
.tddisplay:table-cell;
.tr:hoverbackground-color:#ccc;

【讨论】：

开箱即用的好想法。 OP 没有特别要求表的语义。但是，这不是真正的表格数据的解决方案。

【参考方案7】：

要链接整行，你需要在你的行上定义onclick函数，即<tr>element，并在tr元素的CSS中定义一个鼠标hover，使鼠标指针指向一个典型的网页中的点击手：

在表中：

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

【参考方案8】：

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

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

cursor CSS 属性设置光标的类型，如果有的话，在什么时候显示 鼠标指针在一个元素上。

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