HTML table row link

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 if JavaScript is the answer, please use jquery.

Answers


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>

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

   });
});

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

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

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>

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


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


Need Your Help

IIS App Pools - Stop/Start vs Recycle

iis application-pool worker-process recycle

I've noticed that on one of my production web apps, when I manually recycle an app pool, the recycled worker process can take upwards of 60+ seconds to actually be completely destroyed, based on wa...

How to tell Json.Net globally to apply the StringEnumConverter to all enums

c# .net json json.net

I want to deserialize enumerations to their string representation and vice versa with json.net. The only way I could figure out to tell the framework to apply its StringEnumConverter is to annotate...