Making a table row (tr) clickable with jQuery (with an a href link, and hover!?)

Just a (hopefully) quick question, I have the following HTML code:

<tr>
 <td><img src="img/icons/file_pdf.png"></td>
 <td><a href="../upload/1267473577.pdf">Bulletin 1st March 2010</a></td>
 <td>(01/03/10)</td>
</tr>

Ideally I'd like a way to grab the a href link using jQuery and make it so that no matter where you click on that particular table row, it will tak开发者_JAVA技巧e you to that link.

Is there any way to do this? I can do it via icky inline JavaScript as an absolute last resort, but since finding out about jQuery I quite like the idea of being able to do this cleanly and unobtrusively :-)

Assuming it's a "normal" link (not a Javascript trigger) this will be sufficient:

$("tr").click(function() {
  window.location.href = $(this).find("a").attr("href");
});

You will probably want to communicate this behaviour to the user in some way. The minimal approach would be changing the cursor while hovering over the row.

I found this solution to work well for me.

$('table tr').live("click",function(e){ 
    if (e.target instanceof HTMLInputElement || e.target instanceof HTMLAnchorElement){
        return;
        }
        alert('works');
});

If you have another link inside the table, like a delete link, you may want to use the event object to check if the user clicked over that particular link and avoid the redirection.

Example HTML:

<tr title="http://path/to/download">
  <td><img src="img/icons/file_pdf.png"></td>
  <td><a href="/path/to/delete">Delete</a></td>
  <td>(01/03/10)</td>
</tr>

Example JavaScript:

$("tr").click(function(event) {
  if(event.target.nodeName != "A"){
    window.location.href = $(this).attr("title");
  }
});

Usually my tables have an action cell with edit and delete, so I use the row click event to redirect to the show action.