HTML table row link

Question

What is the best way to make a row of an HTML table a link? I currently am using jquery to zebra stripe the rows and also to highlight the onmouseover/off selected row, so

Answer 1

I just use 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

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

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

This way, all the area of each cell will act as a link, hence, the whole row act as a link.

Answer 3

$(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 4

You do not need jQuery if you don't mind replacing the table by generic elements:

<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

Register a onclick event handler for the tr element. Something like this using jQuery:

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

Answer 6

Here is a jQuery plugin based on Nick's solution.

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

Expects rows to be wrapped in tbody's. The height is set explicitly as Nick's original solution did not work for me on neighbouring cells with different heights. Make sure to style a-elements as blocks. If you want to apply padding, apply it to the a-elements instead of table cells:

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

Simply call

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

Hope it helps. Cheers, Richard