Question

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

Answer 1

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

Answer 2

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

   });
});

Answer 3

为tr元素注册onclick事件处理程序。使用jQuery这样的东西：

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

Answer 4

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

Answer 5

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

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

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

Answer 6

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

希望它有所帮助。干杯，理查德

HTML表格行链接

6 个答案: