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

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

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