链接整个表行？

Question

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

.tableClass td a{
   display: block;
}

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

Answer 1

我同意马蒂的观点.用一些简单的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 */
}

Answer 2

很不幸的是,不行.不是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");
});

Answer 3

使用::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以红色在演示突出,所以你可以看到它在做什么.

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,它将消除表格单元格之间的差距并更改悬停时的背景:

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

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>

CSS:

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

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>

无聊但干净.