HTML table row link

Question

What is the best way to make a tables row a link? I currently am using jquery to zebra stripe the rows and also to highlight the onmouseover/off selected row so if js is the answer please use jquery.

Answer 1

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 2

$(document).ready(function(){
   $("tr").click(function(){
      /* personally I would throw a url attribute (<tr url="http://www.hunterconcepts.com"&gt;) on the tr and pull it off on click */
      window.location = $(this).attr("url");

   });
});

Answer 3

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>