Jquery HTML表格行链接

使HTML表的一行成为链接的最佳方法是什么？我目前正在使用jquery对行进行斑马线标记，并突出显示onmouseover/off所选行，因此如果JavaScript是答案，请使用jquery。

为tr元素注册onclick事件处理程序。使用jQuery时会出现如下情况：

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

$（文档）.ready（函数（）{
$（“tr”）。单击（函数（）{
/*就我个人而言，我会在tr上抛出一个url属性（），并在单击时将其删除*/
window.location=$（this.attr（“url”）；
});
});

我只是使用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>

table.collection{宽度：500px；边框折叠：折叠；}
table.collection tr{背景色：#fff；边框底部：1px#99b实心；}
table.collection tr:hover{背景色：#ffe；}
table.collection td{显示：表格单元格；边框底部：1px#99b实心；填充：0px；}
table.collection td a{文本装饰：无；显示：块；填充：0px；高度：100%；}

.tdStreacher{
身高：100%；
宽度：100%；
填充：3倍；
}

---

这样，每个单元格的所有区域都将充当链接，因此，整行将充当链接。

这是一个基于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);

就叫

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

希望能有帮助。干杯

---

Richard

如果不介意用泛型元素替换表，则不需要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>

.桌子{
边界塌陷：塌陷；
边界间距：0；
显示：表格；
}
.tr{
显示：表格行；
}
.td{
显示：表格单元格；
}

谷歌搜索查询“jquery tr link”已经给了我一些解决方案。也许你也应该试试？我没有回答你的问题，因为我根本没有jquery的经验，所以我可能会说一些“愚蠢的”；-）是的，它给了你结果，但我不会考虑大多数答案。如果我用谷歌搜索“狗屎tr链接”，我也会得到“答案”。）提出的两个JQuery解决方案在可用性和可访问性方面存在问题。CSS解决方案更适合任何公共网站。请看我的评论。这不是将您链接到每行单击的相同位置吗？您可以在每个tr中使用隐藏输入来存储url。这确实会将相同的链接绑定到每行，并根据您的需要进行修改。目前为止，这是最好的解决方案。浏览器仍将此视为链接，因此“在选项卡中打开”或“复制链接”将起作用。其他解决方案破坏了我的浏览器！JQuery解决方案可以通过DOM操作自动完成上述操作。我在使用这个解决方案时遇到了问题。如果其中一个表格单元格包含足够的内容以换行，则相邻单元格的高度将不会延伸到全高。你找到解决这个问题的方法了吗？高度：100%并不能在FF 3.6 HTML5 doctype中解决这个问题。这种方法的问题是你有很多链接，因此，如果有人通过tab键/screen reader/等浏览内容，他们必须跳过大量链接才能进入下一个链接。让可点击内容成为实际链接真是太棒了。更好的是，使href在禁用javascript时可以工作。如果需要进行tabing，那么将行上除一个锚点外的所有锚点都设置为tabIndex=-1Ok，这很好，但是如何在新窗口中打开它呢？就像是一个。。。同样，这种方式（仅当您单击它时，它会通过引用字符串…使用js onclick-no…当人们试图以与单击

a

元素相同的方式单击

tr

时，问题就会出现（例如，shift+单击或cmd+单击以获取新选项卡等）

href

不是更好的属性吗？没有看到接受的解决方案吗？在1999/xhtml中不起作用，因为高度：100%不一定跨越整个单元格。您不保留通过使用此解决方案中的table、tr和td标记获得的语义含义。

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

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

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