HTML表格行链接

Question

HTML表格行链接

jqueryhtmlhtml-table

13

如何将HTML表格中的一行设置为链接？我目前使用jQuery来实现斑马线条纹和鼠标悬停/选中行高亮显示，所以如果需要JavaScript，请使用jQuery。

- hacintosh

谷歌搜索查询“jquery tr link”已经给了我一些解决方案。也许你也应该试试？我没有任何jquery经验，所以我可能会说些“蠢话”，不回答你的问题。;-) - RuudKok

8

是的，它会给你结果，但我不认为大部分都是答案。如果我谷歌搜索“狗屎 tr 链接”，我也会得到“答案” 。 :) - hacintosh

1

两种提出的 JQuery 解决方案在可用性和无障碍性方面存在问题。对于任何公共网站，CSS 解决方案更好。请查看我的评论。 - Andy Baker

6个回答

18

$(document).ready(function(){
   $("tr").click(function(){
      /* personally I would throw a url attribute (<tr url="http://www.hunterconcepts.com">) on the tr and pull it off on click */
      window.location = $(this).attr("url");

   });
});

- Hunter

2

好的，那很棒，但是如何使它在新窗口中打开？就像<a target="_blank"...>一样...还有这种方式（只有当你点击<a...>时才会传递Referrer字符串...使用js onclick - 不要... - Denis

1

问题出现在人们试图以与单击a元素相同的方式单击tr时（即使用shift +单击或cmd +单击以打开新标签等）。 - hohner

“href”不是更好的属性吗？ - Lenar Hoyt

2

如果您不介意使用通用元素替换表格，则无需使用jQuery。

<style>
    .table {
        border-collapse: collapse;
        border-spacing: 0;
        display: table;
    }
    .tr {
        display: table-row;
    }
    .td {
        display: table-cell;
    }

</style>

<section class="table">
    <a class="tr" href="#">
        <div class="td">
            A
        </div>
        <div class="td">
            B
        </div>
        <div class="td">
            C
        </div>
    </a>
</section>

- Jorn Mineur

1

使用此解决方案时，您无法保留使用表格、tr和td标签获得的语义含义。 - Andreas

2

为 tr 元素注册 onclick 事件处理程序。使用 jQuery 可以像这样：

$("tr").bind("click", function(){ 
  window.location = 'http://www.example.com/'; 
});

- RvV

每次点击行时，这个链接都会将您带到相同的位置吗？ - RuudKok

您可以在每个tr中使用一个隐藏的输入来存储URL。 - Adones Cunha

这将确实将相同的链接绑定到每一行，根据您的需求进行修改。 - Ronny Vindenes

1

这是一个基于Nick的解决方案的jQuery插件。

(function($) {
  $.fn.linkWholeRows = function() {

    // for each object
    return this.each(function() {

      // for each row
      $(this).find('tbody tr').each(function() {
        // get the first link's href
        var href = $(this).find('td > a').attr('href');
        // if none found then
        if (href === undefined) {
          return true; // continue
        }

        // wrap all cells with links that do not already have a link
        $(this).children().not(':has(a)').each(function() {
          $(this).contents().wrapAll('<a href="' + href + '" />');
        });

        // apply the row's height to all links
        // in case that the cells' content have different heights
        var height = $(this).children().css('height');
        $(this).find('td > a').each(function() {
          $(this).css('height', height);
          // do not forget to apply display:block to the links
          // via css to make it work properly
        });
      }); // each row

    }); // each object

  };
})(jQuery);

期望行被包裹在tbody中。高度被明确设置，因为Nick的原始解决方案对于具有不同高度的相邻单元格对我来说无效。确保将a元素样式设置为块级元素。如果要应用填充，请将其应用于a元素而不是表格单元格：

a {
  display: block;
  padding: 0.25em 0.5em;
}
tbody td { padding: 0; }

只需调用即可。

$('#your-table').linkWholeRows();

希望这有所帮助。祝好，理查德

- Richard Kiefer

1

<td>
    <a href="/whatevs/whatevs">
        <div class="tdStreacher"> linkName
        </div>
    </a>
</td>

.tdStreacher{
    height: 100%;
    width: 100%;
    padding: 3px;
}

这样，每个单元格的整个区域都将作为一个链接，因此整行都将作为一个链接。

- uggeh

1

没看到被接受的解决方案？在1999/xhtml中不起作用，因为height:100%并不一定跨越整个单元格。 - dube

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Nick · Accepted Answer

我只使用CSS：

<style>
table.collection {width:500px;border-collapse:collapse;}
table.collection tr {background-color:#fff; border-bottom: 1px #99b solid;}
table.collection tr:hover {background-color:#ffe;}
table.collection td {display:table-cell;border-bottom: 1px #99b solid; padding:0px;}
table.collection td a {text-decoration:none; display:block; padding:0px; height:100%;}
</style>
<table class="collection">
<tr>
    <td><a href="#">Linky1</a></td>
    <td><a href="#">Data1</a></td>
</tr>
<tr>
    <td><a href="#">Linky2</a></td>
    <td><a href="#">Data2</a></td>
</tr>
</table>