13

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

4

6 回答 6

40

我只使用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>
于 2009-02-20T15:33:13.200 回答
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");

   });
});
于 2009-02-20T15:18:55.887 回答
2

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

$("tr").bind("click", function(){ 
  window.location = 'http://www.example.com/'; 
});
于 2009-02-20T12:26:00.887 回答
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>
于 2012-08-13T10:04:14.853 回答
1 
<td>
    <a href="/whatevs/whatevs">
        <div class="tdStreacher"> linkName
        </div>
    </a>
</td>

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

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

于 2011-07-18T15:00:37.720 回答
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 中。高度是明确设置的，因为尼克的原始解决方案不适用于我在具有不同高度的相邻单元格上。确保将 a 元素设置为块。如果要应用填充，请将其应用到 a 元素而不是表格单元格：

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

只需调用

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

希望能帮助到你。干杯，理查德

于 2012-03-02T17:28:29.303 回答